简单的一个3d翻转的动画特效：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main-img{width: 800px; margin: 50px auto 0; overflow: hidden;}
.main-img .img-item{width: 180px; height: 250px; margin: 0 30px 30px 0; float: left;}
.main-img .img-item .img-box{width: 180px; height: 250px;}
.main-img .img-item .img-box img{width: 180px; height: 250px;}
/**/
.main-img .img-item.item1{}
.main-img .img-item.item1 .img-box{transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.main-img .img-item.item1:hover .img-box{transform: perspective(1000px) rotateY(45deg);}
/**/
.main-img .img-item.item2{position: relative;}
.main-img .img-item.item2 .img-box{backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.main-img .img-item.item2 .img-box:last-child{z-index: 2;}
.main-img .img-item.item2 .img-box:first-child{transform: rotateY(180deg);}
.main-img .img-item.item2:hover .img-box:first-child{transform: rotateY(0deg);}
.main-img .img-item.item2:hover .img-box:last-child{transform: rotateY(-180deg);}
/**/
.flip-container{ perspective: 1000px; /* 设置透视点 */ }
.flipper{ width: 180px; height: 250px;
transition: 0.6s; /* 设置过渡特效 */
transform-style: preserve-3d; /* 开启3D环境 */
position: relative;
}
.front,.back{width: 180px; height: 250px; backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.front img,.back img{width: 180px; height: 250px;}
.front{z-index: 2;}
.back{transform: roateY(180deg);}
.flipper:hover .front{transform: rotateY(-180deg);}
.flipper:hover .back{transform: rotateY(0deg);}
</style>
</head>
<body>
<div class="main-img">
<div class="img-item item1">
<div class="img-box"><img src="images/111.jpg"></div>
</div>
<div class="img-item item2">
<div class="img-box"><img src="images/111.jpg"></div>
<div class="img-box"><img src="images/222.jpg"></div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front"><img src="images/111.jpg"></div>
<div class="back"><img src="images/222.jpg"></div>
</div>
</div>
</body>
</html>
打完收工！
标签：box,img,width,transform,---,item,main,css,3d From： https://www.cnblogs.com/e0yu/p/17681564.html