body {
perspective:400px;
}
.bigBox {
width:100px;
height:150px;
margin:300px auto;
position:relative;
transform-style:preserve-3d;
transform:rotateY(0deg) rotateZ(0deg);
animation:bgBox 10s ease-in infinite;
}
.bigBox>div {
width:100%;
height:100%;
opacity:0.5;
background-color:skyblue;
line-height:150px;
text-align:center;
font-size:30px;
position:absolute;
top:0;
left:0;
}
.bigBox>div:nth-child(1) {
/* background-color:rgb(0,183,255);
*/
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:translateZ(250px);
}
.bigBox>div:nth-child(2) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(36deg) translateZ(250px);
}
.bigBox>div:nth-child(3) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(72deg) translateZ(250px);
}
.bigBox>div:nth-child(4) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(108deg) translateZ(250px);
}
.bigBox>div:nth-child(5) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(142deg) translateZ(250px);
}
.bigBox>div:nth-child(6) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(178deg) translateZ(250px);
}
.bigBox>div:nth-child(7) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(214deg) translateZ(250px);
}
.bigBox>div:nth-child(8) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(250deg) translateZ(250px);
}
.bigBox>div:nth-child(9) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(286deg) translateZ(250px);
}
.bigBox>div:nth-child(10) {
background:url(https://www.jq22.com/img/cs/300x500-1.png) 0 0 no-repeat;
background-size:100%;
transform:rotateY(322deg) translateZ(250px);
}
@keyframes bgBox {
0% {
transform:rotateY(0deg)
}
100% {
transform:rotateY(360deg)
}
}更新时间:2021-09-17 08:18:58
纯css3 动画效果,