思路:
首先有一个正方形,根据rotate
translate
属性设定好正方体六个面的位置
然后用animation
动画让正方体进行360°的旋转
具体代码:
.box {
width: 200px;
height: 200px;
/* border: 1px dashed red; */
margin: 100px auto;
position: relative;
border-radius: 50%;
/* 让子盒子保持3d效果*/
transform-style: preserve-3d;
/*transform:rotateX(30deg) rotateY(-30deg);*/
animation: rotate 8s linear infinite;
}
.box>div {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.7;
}
.left {
background-color: #afa;
/* 变换中心*/
transform-origin: left;
/* 变换*/
transform: rotateY(90deg) translateX(-100px);
}
.right {
background: #aff;
transform-origin: right;
/* 变换*/
transform: rotateY(90deg) translateX(100px);
}
.forward {
background: #faa;
transform: translateZ(100px);
}
.back {
background: #aaf;
transform: translateZ(-100px);
}
.up {
background: #faf;
transform: rotateX(90deg) translateZ(100px);
}
.down {
background: #ffa;
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
<div class="box">
<div class="up"></div>
<div class="down"></div>
<div class="left"></div>
<div class="right"></div>
<div class="forward"></div>
<div class="back"></div>
</div>
来源:CSDN
作者:喻洁Aurora
链接:https://blog.csdn.net/weixin_44040583/article/details/103847890