思路：大致就是让所有盒子绝对定位，然后给每一个盒子设置动画，让其盒子沿y轴方向旋转，并且向z轴移动，盒子之间的动画需要有一定的延迟时间，让所有盒子旋转到一定位置时，让其父级进行关于y轴的旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>环形</title>
<style type="text/css">
@keyframes run1{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(60deg) translateZ(300px);
}
}
@keyframes run2{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(120deg) translateZ(300px);
}
}
@keyframes run3{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(180deg) translateZ(300px);
}
}
@keyframes run4{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(240deg) translateZ(300px);
}
}
@keyframes run5{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(300deg) translateZ(300px);
}
}
@keyframes run6{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(360deg) translateZ(300px);
}
}
@keyframes run{
from{
transform: rotateY(0deg) ;
}
to{
transform: rotateY(360deg);
}
}
body{
width:100%;
-webkit-transform-style: preserve-3d;
perspective: 2000px;
background:black;
}
.wrap{
width: 120px;
height: 200px;
margin:200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
animation:run 5s 2s infinite linear;
}
.box{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background: red;
opacity: 0.5;
box-shadow: 0px 10px 100px #CCFF66;
}
.box:nth-child(1){
animation: run1 1s linear forwards;
}
.box:nth-child(2){
animation: run2 1s 0.2s linear forwards;
}
.box:nth-child(3){
animation: run3 1s 0.4s linear forwards;
}
.box:nth-child(4){
animation: run4 1s 0.6s linear forwards;
}
.box:nth-child(5){
animation: run5 1s 0.8s linear forwards;
}
.box:nth-child(6){
animation: run6 1s 1s linear forwards;
}
/*.wrap:hover .box:nth-child(1){
-webkit-transform: translateZ(300px);
background: green;
}
.wrap:hover .box:nth-child(2){
-webkit-transform: rotateY(60deg) translateZ(300px);
background: black;
}
.wrap:hover .box:nth-child(3){
-webkit-transform: rotateY(120deg) translateZ(300px);
background:blue;
}
.wrap:hover .box:nth-child(4){
-webkit-transform: rotateY(180deg) translateZ(300px);
background:yellow;
}
.wrap:hover .box:nth-child(5){
-webkit-transform: rotateY(240deg) translateZ(300px);
background:pink;
}
.wrap:hover .box:nth-child(6){
-webkit-transform: rotateY(300deg) translateZ(300px);
background:purple;
}
.wrap:hover{
-webkit-transform: rotateX(-15deg) rotateY(360deg);
-webkit-transition: 10s 3.5s;
}*/
img{
height: 100%;
width: 100%;
object-fit: cover;
}
embed{
width: 0;
height: 0;
}
</style>
</head>
<body>
<embed loop src="./1.mp3"></embed>
<div class="wrap">
<div class="box">
<img src="./1.jpeg" alt="">
</div>
<div class="box">
<img src="./2.jpeg" alt="">
</div>
<div class="box">
<img src="./3.jpeg" alt="">
</div>
<div class="box">
<img src="./4.jpeg" alt="">
</div>
<div class="box">
<img src="./5.jpeg" alt="">
</div>
<div class="box">
<img src="./6.jpeg" alt="">
</div>
</div>
</body>
</html>