*{
margin: 0;
}
body
{
/* perspective视距添加给body */
perspective: 800px;
}
.wrapDiv{
width: 200px;
height: 200px;
margin: 350px auto;
transform-style: preserve-3d;
/* transform: rotateX(45deg) rotateZ(45deg); */
animation: r3d 15s infinite linear;
}
img {
/* 设置图片为不是基线对齐的方式 */
vertical-align: top;
width: 200px;
height: 200px;
}
.wrapDiv>div{
width: 200px;
height: 200px;
/* 开启子元素的绝对定位 */
position: absolute;
opacity: .7;
}
.div1{
transform: rotateY(90deg) translateZ(100px);
}
.div2{
transform: rotateY(-90deg) translateZ(100px);
}
.div3{
transform: rotateX(-90deg) translateZ(100px);
}
.div4{
transform: rotateX(90deg) translateZ(100px);
}
.div5{
transform: rotateX(0deg) translateZ(100px);
}
.div6{
transform: rotateY(180deg) translateZ(100px);
}
@keyframes r3d {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}