css3设置背面不可见的样式是:“backface-visibility: hidden;”。backface-visibility属性定义当元素不面向屏幕时是否可见;当值为hidden时背面是不可见的。
backface-visibility属性介绍
backface-visibility属性和3D transform效果相关,它用于决定当一个元素的背面面向用户的时候是否可见。例如下面图片展示的两个圆形元素,前面一个是正面,后面一个是背面。当它翻转到背面的时候,上面的文字应该是正面的镜像,这是默认的行为。
如果在旋转元素不希望看到其背面时,backface-visibility属性很有用。
语法
backface-visibility: visible|hidden;
visible:背面是可见的。
hidden:背面是不可见的。
浏览器兼容
所有的现代浏览器都支持backface-visibility属性。Chrome、Safari和Opera浏览器需要使用-webkit-的厂商前缀。IE10+的IE浏览器都支持该属性。
应用举例
我们在这篇文章中将会列举4个元素使用backface-visibility翻转的例子。
旋转的甜甜圈
这个demo时理解backface-visibility属性的很好的例子。当我们翻转了甜圈后,不希望再看到它的front面。因此我们需要另一幅代表甜圈背面的图片来取代原来的背面。我们会将"front"面和"back"main放置在相同的位置上,"front"面位于"back"面的前面。"front"面使用backface-visibility: hidden;来隐藏背面。它们会沿Y轴同步旋转,转动背面时,"front"面消失,另一幅图片被展示出来。
img { position: absolute; animation: turn 2s infinite; } .donut-front { z-index: 5; backface-visibility: hidden; } @keyframes turn { to { transform: rotateY(360deg); } }
两张图片都使用相同的动画,只是第一张图片在旋转到背面时就被隐藏起来,这是第二张图片就自然的展示出来。
洒落的咖啡
img { position: absolute; animation: turn-over 2s 700ms infinite; } .cup-front { z-index: 3; backface-visibility: hidden; } .coffee-drip { position: absolute; transform: rotateX(180deg); backface-visibility: hidden; animation: spill 2s infinite; animation-delay: 700ms; } @keyframes turn-over { to { transform: rotateX(-180deg); } } @keyframes spill { to { transform: translateY(200px); } }
商店的门
这里有三幅图片:一幅是不带牌子的门的正面,一幅是不带牌子的门的背面(颜色上有区别),还有一幅是挂在门上的牌子。在两个门的图片上都带有相同大小的窗口,这个设置时的门在翻转到背面时窗口也能正常显示。
img { position: absolute; transform: perspective(600px) rotateY(45deg); transform-origin: right; animation: open 4s infinite; } .front { z-index: 2; backface-visibility: hidden; } @keyframes open { 50% { transform: perspective(600px) rotateY(-140deg); } }
当门打开的时候,“front”面消失,“back”展示出来,而门上的窗口保持不变。
翻转的盒子
当在3D空间中使用backface-visibility属性会是什么情况呢?这个例子展示了一个3D旋转的盒子动画。.box元素包含6个面,它们使用translations和rotations在X、Y和Z轴上分别定位,组成一个立方体。
盒子的每个面都设置了opacity为0.6,这意味着如果没有backface-visibility:hidden;属性,我们可以看到盒子的所有面。
盒子的面开始时被设置为backface-visibility:hidden;,当我们点击backface-visibility按钮时,会触发backface-visibility: visible;,这时,盒子的6个面都处于可见状态。
例子的演示地址:http://www.htmleaf.com/Demo/201504151687.html
源码下载:http://down.htmleaf.com/1504/201504152003.zip
更多web开发知识,请查阅 HTML中文网 !!
以上就是css3设置背面不可见的样式是什么?的详细内容,更多请关注0133技术站其它相关文章!