/* 顶部的盒子 */
.container{
width:1320px;
margin:50px auto;
}
/* 翻转类样式 */
.flip{
width:640px;
height: 320px;
margin:10px;
float:left;
position: relative;
}
/* 前后两个类的共同样式 */
.flip div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
box-shadow: 2px 2px 20px rgba(0,0,0,.5);
}
/* 提示文本利用:before伪对象到位 */
.flip div:before{
content:attr(data-text);
width:100%;
height:30px;
position:absolute;
left:0;
bottom:0;
line-height:30px;
text-align:center;
color:#fff;
background-color:rgba(0,0,0,.3);
}
/* 分别设置前后两个类的背景图像,垂直位置 */
.flip div.front{
background: url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
z-index: 1;
}
.flip div.back{
background: url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
z-index: 2;
}
/* 翻转类样式 */
.flip{
/*其他代码略*/
/* 设置景深 */
perspective: 1000px;
}
/* 前后两个类的共同样式 */
.flip div{
/*其他代码略*/
transition: all 1s ease;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* hover之后的垂直位置 */
.flip:hover div.front{ z-index: 2;;}
.flip:hover div.back{ z-index: 1;;}
/* rotateY的响应 */
.Y div.back{ transform:rotateY(180deg);}
.Y:hover div.front{ transform:rotateY(180deg);}
.Y:hover div.back{ transform:rotateY(0deg);}
/* rotateX的响应 */
.X div.back{ transform:rotateX(180deg);}
.X:hover div.front{ transform:rotateX(180deg);}
.X:hover div.back{ transform:rotateX(0deg);}