CSS3中3D转换实现立方体效果

CSS3中3D转换实现立方体效果

html:

<!-- 舞台元素，设置perspective，让其子元素获得透视效果 -->
    <div class="rect-wrap">
        <!-- 容器，设置transform-style:preserve-3d，让其子元素在3D空间呈现 -->
        <div class="container">
            <!-- 立方体的六个面 -->
            <div class="top slide"></div>
            <div class="bottom slide"></div>
            <div class="left slide"></div>
            <div class="right slide"></div>
            <div class="front slide"></div>
            <div class="back slide"></div>
        </div>
    </div>

CSS样式：

<title>CSS3中3D转换实现立方体效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .rect-wrap{
            position: relative;
            perspective: 1600px;
        }
        .container{
            width: 800px;
            height: 800px;
            margin: 0 auto ;
            transform-style: preserve-3d;
            /* 设置3D空间的原点在平面中心再向z轴移动200px的位置 */
            transform-origin: 50% 50% 200px;
            animation: myrotate 30s linear infinite;
        }
         /* 立方体的每个面 */
        .slide{
            width: 400px;
            height: 400px;
            position: absolute;
        }
        /* 立方体的顶面 */
        .top{
            background-color: rgba(101, 198, 92, 0.6);
            left: 200px;
            top: -200px;
            transform: rotateX(-90deg);
            transform-origin: bottom;
        }
          /* 立方体的底面 */
          .bottom{
            background-color: rgba(206, 146, 185, 0.6);
            left: 200px;
            bottom: -200px;
            transform: rotateX(90deg);
            transform-origin: top;
          }
           /* 立方体的左面 */
           .left{
            background-color: rgba(178, 178, 207, 0.6);
            left: -200px;
            top: 200px;
            transform: rotateY(90deg);
            transform-origin: right;
           }
           /* 立方体的右面 */
           .right{
            background-color: rgba(43, 47, 151, 0.6);
            left: 600px;
            top: 200px;
            transform: rotateY(-90deg);
            transform-origin: left;
           }
            /* 立方体的前面 */
            .front{
                background-color: rgba(246, 154, 33, 0.6);
                left: 200px;
                top: 200px;
                /* 立方体的前面对着屏幕，所以不用旋转，只需向z轴前移动距离 */
                transform: translateZ(400px);
            }
            /* 立方体的后面 */
            .back{
                background-color: rgba(0,255,0,0.6);
                left: 200px;
                top: 200px;
                /* 立方体后面正对着屏幕，所以不用旋转，只需向z轴后移动距离*/
                transform: translateZ(0);
            }
            @keyframes myrotate{
                    0%{
                        transform:rotateX(0deg) rotateY(0deg);
                    }
                    10%{
                        transform:rotateX(0deg) rotateY(180deg);
                    }
                    20%{
                        transform:rotateX(-180deg) rotateY(180deg);
                    }
                    30%{
                        transform:rotateX(-360deg) rotateY(180deg);
                    }
                    40%{
                        transform:rotateX(-360deg) rotateY(360deg);
                    }
                    50%{
                        transform:rotateX(-180deg) rotateY(360deg);
                    }
                    60%{
                        transform:rotateX(90deg) rotateY(180deg);
                    }
                    70%{
                        transform:rotateX(0) rotateY(180deg);
                    }
                    80%{
                        transform:rotateX(90deg) rotateY(90deg);
                    }
                    90%{
                        transform:rotateX(90deg) rotateX(0);
                    }
                    100%{
                        transform: rotateX(0) rotate(0);
                        }  
                }
    </style>

预览效果：