[分享]css3搭建正方体

CSS3是当前比较流行的前端技术，可以用它来构建一些比较酷炫的效果，比如正方体。下面我们来看看如何用CSS3来搭建一个漂亮的正方体。 .cube { width: 200px; height: 200...

CSS3是当前比较流行的前端技术，可以用它来构建一些比较酷炫的效果，比如正方体。下面我们来看看如何用CSS3来搭建一个漂亮的正方体。

 .cube {
        width: 200px;
        height: 200px;
        position: relative;
        perspective: ***px;
    }

    .cube .side {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #f00;
        opacity: 0.7;
        transition: all 1s ease-in-out;
        transform-origin: center center;
    }

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

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

    .cube .side.three {
        transform: rotateY(180deg) translateZ(100px);
    }

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

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

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

上面的代码是构建正方体的CSS代码，其中包括了容器(cube)和六个面。我们可以根据需求修改它们的颜色和位置，从而构建出漂亮的几何图形效果。