<div class="big"> <div class="main"> <div class="first"> <img src="img/****1.jpg" alt=""> </div> <div class="second"> <img src="img/****2.jpg" alt=""> </div> </div> </div>
这里面big盒子是容器,main盒子是用来容乃内外两面
.big { width: 400px; height: 400px; margin: 100px auto; } .main { position: relative; width: 100%; height: 100%; perspective: 800px; transform-style: preserve-3d; transition: 2s linear; /* 3d代码 */ } .main:hover { transform: rotateY(180deg); } .first { position: absolute; width: 100%; height: 100%; } .second { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /*backface-visibility:hidden;属性, 我们可以使一个元素在翻转之后消失, 这是可以使用另一个元素放在它的背面, 从而制作出一种元素翻转之后出现另一个元素的效果。*/ transform: rotateY(180deg); } img { width: 100%; height: 100%; }