CSS3实现3D翻转效果（兼容ios）

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%;
}