CSS制作旋转立体正方形_css 设置立体方块阵并调整角度-CSDN博客

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/114866678

<div class="stage">
    <div class="container">
        <div class="side front">前面</div>
        <div class="side back">背面</div>
        <div class="side left">左面</div>
        <div class="side right">右面</div>
        <div class="side top">顶面</div>
        <div class="side bottom">底面</div>
    </div>
</div>

@keyframes spin {
    0%{
    transform:rotateY(0deg);}
    100%{
        transform: rotateY(360deg);
    }
}
.stage{
    perspective: 300px;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position: relative;
}
.container{
    transform-style: preserve-3d;
}
.container:hover{
    animation: spin 5s linear infinite;
}
.side{
    background: rgba(255,0,0,0.3);
    border: 1px solid red;
    font-size: 60px;font-weight: bold;
     height: 196px;line-height:196px;width: 196px;
     position: absolute;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
     text-transform: uppercase;
 }
.front{
    transform: translateZ(100px);
}
.back{
    transform: rotateX(180deg)translateZ(100px);
}
.left{
    transform: rotateY(-90deg) translateZ(100px);
}
.right{
    transform: rotateY(90deg) translateZ(100px);
}
.top{
    transform: rotateX(90deg) translateZ(100px);
}
.bottom{
    transform: rotateX(-90deg) translateZ(100px);
}