transform 360°图片旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360°图片旋转</title>
<style>
.wrap {
width: 200px; height: 200px;
transform-style: preserve-3d;
transform: translate(700px,300px) rotateX(-20deg) rotateZ(-20deg) rotateY(0deg);
animation: Carousel 8s linear infinite;}
.wrap:hover {animation-play-state: paused;}
.wrap div {
width: 200px; height: 200px;
position: absolute; left: 0; top: 0;
font-size: 100px;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
color: #fff;}
.wrap img { width: 100%; height: 100%;}
.wrap div:hover {transform-scale: 2;}
.div1 {transform: rotateY(0deg) translateZ(500px);}
.div2 {transform: rotateY(30deg) translateZ(500px);}
.div3 {transform: rotateY(60deg) translateZ(500px);}
.div4 {transform: rotateY(90deg) translateZ(500px);}
.div5 {transform: rotateY(120deg) translateZ(500px);}
.div6 {transform: rotateY(150deg) translateZ(500px);}
.div7 {transform: rotateY(180deg) translateZ(500px);}
.div8 {transform: rotateY(210deg) translateZ(500px);}
.div9 {transform: rotateY(240deg) translateZ(500px);}
.div10 {transform: rotateY(270deg) translateZ(500px);}
.div11 {transform: rotateY(300deg) translateZ(500px);}
.div12 {transform: rotateY(330deg) translateZ(500px);}
@keyframes Carousel{
50% {
transform: translate(700px,300px) rotateX(20deg) rotateZ(20deg) rotateY(180deg);
}
100% {
transform: translate(700px,300px) rotateX(-20deg) rotateZ(-20deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">
<img src="img/1.jpg"/>
</div>
<div class="div2">
<img src="img/2.jpg"/>
</div>
<div class="div3">
<img src="img/3.jpg"/>
</div>
<div class="div4">
<img src="img/4.jpg"/>
</div>
<div class="div5">
<img src="img/5.jpg"/>
</div>
<div class="div6">
<img src="img/6.jpg"/>
</div>
<div class="div7">
<img src="img/7.jpg"/>
</div>
<div class="div8">
<img src="img/8.jpg"/>
</div>
<div class="div9">
<img src="img/9.jpg"/>
</div>
<div class="div10">
<img src="img/10.jpg"/>
</div>
<div class="div11">
<img src="img/11.jpg"/>
</div>
<div class="div12">
<img src="img/12.jpg"/>
</div>
</div>
</body>
</html>
