[分享]css3怎么怼立方体

CSS3可以使用一些特殊的属性来创建3D效果，其中包括采用transform属性来创建立方体效果。在下面的pre标签中，我们将展示如何使用CSS3将HTML元素变成一个立方体： .cube{ : re...

CSS3可以使用一些特殊的属性来创建3D效果，其中包括采用transform属性来创建立方体效果。在下面的pre标签中，我们将展示如何使用CSS3将HTML元素变成一个立方体：

 .cube{
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d; /*使元素的子元素保留原来的3D效果*/
    }

    .face{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #E8E8E8;
        border: 1px solid #999;
        box-sizing: border-box;
    }

    .front{
        transform: translateZ(100px); /*移至-为近于观察者的方向*/
    }

    .back{
        transform: translateZ(-100px) rotateY(180deg); /*移至+为远离观察者的方向*/
    }

    .left{
        transform: rotateY(-90deg) translateZ(100px) rotateY(180deg); /*左面旋转90度并平移100px，最后再回正*/
    }

    .right{
        transform: rotateY(90deg) translateZ(100px) rotateY(180deg); /*右面旋转90度并平移100px，最后再回正*/
    }

    .top{
        transform: rotateX(90deg) translateZ(100px); /*顶部旋转90度并平移100px*/
    }

    .bottom{
        transform: rotateX(-90deg) translateZ(100px); /*底部旋转90度并平移100px*/
    } 

如上代码中，我们创建了一个类名为“cube”的容器，容器内部包含6个面的元素，分别为“front”、“back”、“left”、“right”、“top”、“bottom”。我们通过使用transform属性以及translatez()、rotateX()、rotateY()等函数来对这些元素进行旋转和平移，最终呈现出类似于立方体的效果。