CSS3 backface-visibility 360度旋转方框应用实例

亮术网 2017-08-03 本网原创

　　CSS3新增了一个非常有意思的属性backface-visibility，它用于设置当元素的背面面向用户时是否显示。由此可知，该属性主要用于动画中，静止的元素在不翻转的情况下，背面不可能面向用户。

　　也就是 backface-visibility 要配合 animation、rotat 等属性一起使用。下面先看 backface-visibility 的语法规则，再看具体的应用实例。

　　 backface-visibility：visible | hidden

　　 backface-visibility 语法规则特别简单，只有两个取值，一个为visible，另一个为hidden。

　　visible：设置元素背面可见，并允许显示正面的镜像，为默认值；

　　hidden：设置元素背面不可见。

　　注意：如果要给某个元素设置backface-visibility属性，必须在该元素上设置，在其父上设置无效。

　　html代码：

<ul class="backface-visibility">
<li class="vbl">backface-visibility:visible</li>
<li class="hid">backface-visibility:hidden</li>
</ul>

　　CSS样式：

.backface-visibility{
width:600px;
height:100px;

font-size:24px;
transform-style:3preserve-3d;
animation:ani-visible ease 5s infinite;
}

.backface-visibility li{
position:relative;
float:left;

width:260px;
height:100px;
margin-left:10px;

border:1px solid #ab9595;
padding:10px;
}

@keyframes ani-visible{
from{transform:rotatey(0);}
to{transform:rotatey(360deg);}
}

.backface-visibility li.vbl{backface-visibility:visible;}
.backface-visibility li.hid{backface-visibility:hidden;}
</style>

　　效果图：