CSS3实现3D翻转效果（兼容ios）_吴小兽_

网络 02-07 4576

backface-visibility 属性定义当元素不面向屏幕时是否可见。默认值visible可见，hidden不可见，但是此属性在ios手机端不兼容，解决方法是使背面.back沿z轴方向移动1px的距离translateZ(1px)从而使正反两面不会叠加在一起。

<div class="content"> <div class="front">正面</div> <div class="back">反面</div> </div> .content{ position:relative; width:20rem; height:20rem; border:1px solid #7f7f7f; transition: all ease-in .26s; transform-style: preserve-3d; perspective: 800px; } .content:hover{ transform: rotateY(180deg); } .front{ position:absolute; top:0; left:0; z-index: 2; backface-visibility: hidden; } .back{ transform:rotateY(180deg) translateZ(1px) ; position:absolute; top:0; left:0; backface-visibility: hidden; background-color:red; color:#fff; width:100%; height:100%; }