效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/a912091ed9d84cf6b5b40575728cc3c7.png#pic_center)
div(图片换成自己的即可使用)
<div class="content1">
<div class="top">
<img src="../../image/webPersonalCenterHome.png" />
</div>
<div class="bottom">
<img src="../../image/webPersonalCenterHome.png" />
</div>
<div class="left">
<img src="../../image/webPersonalCenterHome.png" />
</div>
<div class="right">
<img src="../../image/webPersonalCenterHome.png" />
</div>
<div class="front">
<img src="../../image/webPersonalCenterHome.png" />
</div>
<div class="after">
<img src="../../image/webPersonalCenterHome.png" />
</div>
</div>
css
.content1 {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
position: relative;
margin: 200px auto;
animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.content1 div {
width: 200px;
height: 200px;
position: absolute;
opacity: 0.8;
}
.content1 > div > img {
width: 200px;
height: 200px;
}
.content1 .top {
transform: rotateX(90deg) translateZ(100px);
}
.content1 .left {
transform: rotateY(-90deg) translateZ(100px);
}
.content1 .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.content1 .right {
transform: rotateY(90deg) translateZ(100px);
}
.content1 .front {
transform: rotateY(0deg) translateZ(100px);
}
.content1 .after {
transform: translateZ(-100px) rotateY(180deg);
}