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 动画效果,