backface-visibility当元素不面向屏幕时是否可见
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 }