css3 立方体 站长之家

CSS3 立方体是一种非常酷的 CSS3 特效，它可以使一个元素呈现出立方体的形态。这种特效在网页制作中非常实用，可以用来展示一些 3D 的场景或者简单的 3D 动画效果。下面我们来学习一下如何制作一个 CSS3 立方体。

.box {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: all 1s ease;
}
.box:hover {
    transform: rotateY(180deg);
}
.box .front {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00BCD4;
    transform: translateZ(50px);
}
.box .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #008CBA;
    transform: rotateY(180deg) translateZ(50px);
}
.box .left {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4CAF50;
    transform: rotateY(-90deg) translateZ(50px);
}
.box .right {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #CDDC39;
    transform: rotateY(90deg) translateZ(50px);
}
.box .top {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FF5722;
    transform: rotateX(90deg) translateZ(50px);
}
.box .bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #E91E63;
    transform: rotateX(-90deg) translateZ(50px);
}
    

代码中需要使用到position、transform-style、transition、transform等 CSS 属性。具体的实现可以参考代码注释，需要注意的是，只有在设置了transform-style: preserve-3d; 之后，才能使用rotateX和rotateY等 3D 属性。

除此之外，需要为立方体的六个面分别设置不同的颜色和位置，使其呈现出完整的 3D 效果。整个示例中最重要的是transform: translateZ(50px); ，这样设置可以使六个面都凸现出来。

最后回顾一下代码中最后一个部分：当鼠标在立方体上移动时，通过设置transform: rotateY(180deg); ，可以使立方体做出翻转的动作，这个交互效果十分的棒！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！