CSS3 backface-visibility 360度旋转方框应用实例
CSS3新增了一个非常有意思的属性backface-visibility,它用于设置当元素的背面面向用户时是否显示。由此可知,该属性主要用于动画中,静止的元素在不翻转的情况下,背面不可能面向用户。
也就是 backface-visibility 要配合 animation、rotat 等属性一起使用。下面先看 backface-visibility 的语法规则,再看具体的应用实例。
一、backface-visibility语法规则
backface-visibility:visible | hidden
backface-visibility 语法规则特别简单,只有两个取值,一个为visible,另一个为hidden。
二、backface-visibility的取值说明
visible:设置元素背面可见,并允许显示正面的镜像,为默认值;
hidden:设置元素背面不可见。
注意:如果要给某个元素设置backface-visibility属性,必须在该元素上设置,在其父上设置无效。
三、backface-visibility应用实例
html代码:
<ul class="backface-visibility">
<li class="vbl">backface-visibility:visible</li>
<li class="hid">backface-visibility:hidden</li>
</ul>
CSS样式:
<style type="text/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>
效果图:
- backface-visibility:visible
- backface-visibility:hidden