backface-visibility当元素不面向屏幕时是否可见

Posted 2020-09-06 钟离野

html代码

1 <h1>div1可见</h1>
2 <div class="div1">div---1</div>
3 <h1>div2不可见</h1>
4 <div class="div2">div---2</div>

backface-visibility:定义当元素不面向屏幕时是否可见。visible:可见；hidden: 不可见，浏览器支持：IE10开始支持。
CSS代码：

 1 body{
 2             font-size:62.5%;
 3             line-height: 1.4rem;
 4         }
 5         .div1,.div2{
 6             font-size:1.2rem;
 7             width:20rem;
 8             height:20rem;
 9             background-color:green;
10             color:#fff;
11             -webkit-transform: rotateY(180deg);
12             -moz-transform:  rotateY(180deg);
13             -o-transform: rotateY(180deg);
14             -ms-transform: rotateY(180deg);
15             transform: rotateY(180deg);
16         }
17         .div1{
18             -webkit-backface-visibility: visible;
19             -moz-backface-visibility: visible;
20             backface-visibility: visible;
21         }
22         .div2{
23             -webkit-backface-visibility: hidden;
24             -moz-backface-visibility: hidden;
25             backface-visibility: hidden;
26         }