在这个里面主要就是注意着几个属性的设置perspective: 1000px; transform-style: preserve-3d; 其中perspective: 1000px; 要设置在父元素上面， transform-style: preserve-3d; 是设置中心元素的属性。所有的图片的变形都是相对于中间div的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{width: 1000px; height: 600px; margin: 0 auto; background: hotpink; perspective: 1000px; }
.wrap .box{ transform-style: preserve-3d;width: 160px; height: 100px;background: red; position: relative; left: 40%; top: 40%;}
.wrap .box div{position: absolute; left: 0; top: 0;width: 160px; height: 100px;}
.box div:nth-child(1){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(0deg) translateZ(400px);
}
.box div:nth-child(2){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(30deg) translateZ(400px);
}
.box div:nth-child(3){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(60deg) translateZ(400px);
}
.box div:nth-child(4){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(90deg) translateZ(400px);
}
.box div:nth-child(5){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(120deg) translateZ(400px);
}
.box div:nth-child(6){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(150deg) translateZ(400px);
}
.box div:nth-child(7){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(180deg) translateZ(400px);
}
.box div:nth-child(8){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(210deg) translateZ(400px);
}
.box div:nth-child(9){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(240deg) translateZ(400px);
}
.box div:nth-child(10){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(270deg) translateZ(400px);
}
.box div:nth-child(11){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(300deg) translateZ(400px);
}
.box div:nth-child(12){
background: url(img/pic9.jpg);
background-size: 160px,100px;
transform: scaleZ(1) rotateY(330deg) translateZ(400px);
}
@keyframes move{
0%{transform: rotateY(0deg);}
100%{transform: rotateY(360deg);}
}
.box{
animation: move 5s linear 0.3s infinite;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
