css3 立方体旋转 拆分

CSS3立方体旋转就像是一个未知的神秘物体，不断地在吸引着人们的注意力。如今，我们将逐一拆分这个魔术师的魔法，一步一步来解释它的秘密。

    .cube {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        animation: rotate 5s linear infinite;
    }

    .cube .side {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #fff;
        opacity: 0.7;
        border: 1px solid #ccc;
    }

    .cube .front {
        transform: translateZ(100px);
    }

    .cube .back {
        transform: rotateX(180deg) translateZ(100px);
    }

    .cube .left {
        transform: rotateY(-90deg) translateZ(100px);
    }

    .cube .right {
        transform: rotateY(90deg) translateZ(100px);
    }

    .cube .top {
        transform: rotateX(90deg) translateZ(100px);
    }

    .cube .bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }

    @keyframes rotate {
        from { transform: rotateY(0); }
        to { transform: rotateY(360deg); }
    }

首先，样式表里定义了一个容器

，宽高200px，位置为相对定位。重点是transform-style：preserve-3d这个属性，会让子元素在三维空间内绕父级元素旋转，并且transform-origin：50% 50%表示旋转中心在中心点。

接着定义了几个子元素，每个子元素代表一个面，使用.top、.bottom、.left等类名表示立方体的上下左右等方位。这里主要使用了transform属性，translateZ(100px)表示以Z轴向屏幕外移动100px。rotateX、rotateY表示以X轴或Y轴旋转。

最后，使用@keyframes定义一个旋转动画rotate，从0到360度。这时候，每个面都在不停地旋转。如果想要停止旋转，只需要把animation属性设置为空值即可。

上一篇：css一个正方形四边全是t型 下一篇：css怎么加粗一点