效果展示
index.css
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: radial-gradient(rgb(243, 210, 252) 90%,rgb(249, 73, 240));
}
.container{
position: relative;
width: 398px;
height: 398px;
transform-style: preserve-3d;
animation: animate 5s linear alternate infinite;
}
.container div{
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
}
.container div:nth-child(1){
transform: translateZ(199px);
}
.container div:nth-child(2){
transform:rotateY(180deg) translateZ(199px);
}
.container div:nth-child(3){