探索CSS3中的神秘元素：-webkit-backface-visibility详解

backface-visibility属性， 顾名思义，是用来控制当元素背面朝向看看者时是不是可见的。这玩意儿属性尤为关键，它能帮我们实现更加流畅和天然的动画效果。

一、基本概念

backface-visibility属性指定当元素背面朝向看看者时是不是可见。元素的背面总是透明的，当其朝向看看者时看得出来正面的镜像。在有些情况下我们不希望元素内容在背面被看到，这时就能通过设置这玩意儿属性来控制。

webkit-backface-visibility: hidden; 这行代码说明， 当元素背面朝向看看者时背面是不可见的。

二、属性值

webkit-backface-visibility属性只有两个兴许的值：hidden和visible。

当设置为hidden时元素背面朝向看看者时是不可见的。

三、 实际应用

在3D转换中，比如实现卡牌翻转效果时用-webkit-backface-visibility能控制背面是不是可见，从而使动画更加平滑天然。

div {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome、 Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
}

四、注意事项

当设置-webkit-backface-visibility为hidden时需要注意以下几点：

1. 如果元素背面有内容，且设置为hidden，则这些个内容将不会被看得出来。

2. 如果元素背面有透明度，设置为hidden后透明度将不起作用。

3. 在用3D转换时 确保元素背面朝向看看者，否则设置-webkit-backface-visibility为hidden不会有随便哪个效果。

webkit-backface-visibility是一个有力巨大的CSS属性，它能帮我们实现更加丰有钱的视觉效果。在实际开发中，熟练运用这玩意儿属性，能让我们的页面更加生动好玩。欢迎用实际体验验证这玩意儿观点。