backface-visibility属性(CSS设置隐藏被旋转的div)
backface-visibility属性
backface-visibility有两个特点：hidden和visible
在下面比如中hidden是把被旋转div的背面躲藏，而visible是将其显现
直接看比如吧：
本例有两个div元素，均旋转180度，背向用户。
第一个div元素的backface-visibility特点设置为"hidden"，所以应该是不可见的。
DIV1
DIV2
注释：本例只在InternetExplorer10、Firefox、Chrome以及Safari中有效。
出现的作用是：
可是假如你把#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}中backface-visibility的特点改为visible
CSS设置隐藏被旋转的div
运用CSS3backface-visibility特点咱们能够制作出许多风趣的动画作用。当你翻转一个元素的时分，你看到的是什么？通常情况下，咱们应该看到的是元素的不和，这是正常的情况，但是有时分咱们期望翻转一个元素后看到的是另一个元素。经过backface-visibility:hidden;特点，咱们能够使一个元素在翻转之后消失，这是能够运用另一个元素放在它的不和，然后制作出一种元素翻转之后出现另一个元素的作用。
什么是backface-visibility
backface-visibility特点和3Dtransform作用相关，它用于决定当一个元素的不和面向用户的时分是否可见。例如下面图片展示的两个圆形元素，前面一个是正面，后面一个是不和。当它翻转到不和的时分，上面的文字应该是正面的镜像，这是默认的行为。
元素的正面和不和?
浏览器兼容
一切的现代浏览器都支撑backface-visibility特点。Chrome、Safari和Opera浏览器需求运用-webkit-的厂商前缀。IE10+的IE浏览器都支撑该特点。关于浏览器对animations和transforms的支撑，能够检查CanIUse获取相关信息。
应用举例
咱们在这篇文章中将会罗列4个元素运用backface-visibility翻转的比如。
旋转的甜甜圈
旋转的甜甜圈
这个demo时理解backface-visibility特点的很好的比如。当咱们翻转了甜圈后，不期望再看到它的front面。因而咱们需求另一幅代表甜圈不和的图片来替代原来的不和。咱们会将"front"面和"back"main放置在相同的方位上，"front"面位于"back"面的前面。"front"面运用backface-visibility:hidden;来隐藏不和。它们会沿Y轴同步旋转，滚动不和时，"front"面消失，另一幅图片被展示出来。
作品标签： backface-visibility属性
优秀作品：
最新作品：
评论列表（共7人参与）参与讨论或分享设计作品获得视觉癖积分奖励
1、我以注册会员
2021-06-06 20:22:12
ariOpera InternetExplorer10、Firefox以及Opera支撑animation-delay特点。 > 2.你的青春，她的白发。妈妈，母亲节快乐！ Your
回复
-ite注册会员
2021-06-06 20:23:13
它能起到很好的作用。最好能在几秒中的时刻告诉，你要宣扬的内容。假如仅仅在上面长篇大幅的写一些师资力量、教育环境优美、常年免费试听等一些东西，还不如短小精悍的概括backface-visibility属性v> 3 。。。
到底是年轻啊游客
2021-06-06 0:56:15
游客71282：backface-visibi媒体的挑选[河北卫视1台，旅行频道]。 4、网络媒体的挑选 5、户外媒体的挑选[车体、路牌〈暂不考虑〉] p;
回复