<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: lightblue;
}
div.box{
/*position: absolute;*/
200px;
height: 300px;
/*left: 600px;
top: 100px;*/
margin: 100px auto;
transform-style: preserve-3d;
animation: rotateit 10s linear infinite;
}
.box div{
200px;
height: 300px;
position: absolute;
border: 2px solid lightcoral;
top: 0;
left: 0;
background: url(img/test.jpg);
background-size: 100% 100%;
}
/*先转然后移出*/
.box div:nth-child(1){
transform: rotateY(30deg) translateZ(400px);
}
.box div:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
.box div:nth-child(3){
transform: rotateY(90deg) translateZ(400px);
}
.box div:nth-child(4){
transform: rotateY(120deg) translateZ(500px);
}
.box div:nth-child(5){
transform: rotateY(150deg) translateZ(400px);
}
.box div:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
.box div:nth-child(7){
transform: rotateY(210deg) translateZ(400px);
}
.box div:nth-child(8){
transform: rotateY(240deg) translateZ(500px);
}
.box div:nth-child(9){
transform: rotateY(270deg) translateZ(400px);
}
.box div:nth-child(10){
transform: rotateY(300deg) translateZ(500px);
}
.box div:nth-child(11){
transform: rotateY(330deg) translateZ(400px);
}
.box div:nth-child(12){
transform: rotateY(360deg) translateZ(500px);
}
.box div:hover{
transform: rotateY(360deg) translateZ(600px);
/*transform: rotateY(360deg);*/
800px;
height: 1200px;
position: absolute;
top: -200px;
/*left: -600px;*/
/*margin: 100px auto;*/
animation: move 10s linear infinite;
}
@keyframes rotateit{
0%{
transform: rotateX(5deg) rotateY(0deg);
}
50%{
transform: rotateX(-5deg) rotateY(180deg);
}
100%{
transform: rotateX(5deg) rotateY(360deg);
}
}
/*@keyframes move{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}*/
</style>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: lightblue; } div.box{ /*position: absolute;*/ width: 200px; height: 300px; /*left: 600px; top: 100px;*/ margin: 100px auto; transform-style: preserve-3d; animation: rotateit 10s linear infinite; } .box div{ width: 200px; height: 300px; position: absolute; border: 2px solid lightcoral; top: 0; left: 0; background: url(img/test.jpg); background-size: 100% 100%; } /*先转然后移出*/ .box div:nth-child(1){ transform: rotateY(30deg) translateZ(400px); } .box div:nth-child(2){ transform: rotateY(60deg) translateZ(500px); } .box div:nth-child(3){ transform: rotateY(90deg) translateZ(400px); } .box div:nth-child(4){ transform: rotateY(120deg) translateZ(500px); } .box div:nth-child(5){ transform: rotateY(150deg) translateZ(400px); } .box div:nth-child(6){ transform: rotateY(180deg) translateZ(500px); } .box div:nth-child(7){ transform: rotateY(210deg) translateZ(400px); } .box div:nth-child(8){ transform: rotateY(240deg) translateZ(500px); } .box div:nth-child(9){ transform: rotateY(270deg) translateZ(400px); } .box div:nth-child(10){ transform: rotateY(300deg) translateZ(500px); } .box div:nth-child(11){ transform: rotateY(330deg) translateZ(400px); } .box div:nth-child(12){ transform: rotateY(360deg) translateZ(500px); } .box div:hover{ transform: rotateY(360deg) translateZ(600px); /*transform: rotateY(360deg);*/ width: 800px; height: 1200px; position: absolute; top: -200px; /*left: -600px;*/ /*margin: 100px auto;*/ animation: move 10s linear infinite; } @keyframes rotateit{ 0%{ transform: rotateX(5deg) rotateY(0deg); } 50%{ transform: rotateX(-5deg) rotateY(180deg); } 100%{ transform: rotateX(5deg) rotateY(360deg); } } /*@keyframes move{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }*/ </style> </head> <body> <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> </body> </html>