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

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

  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