用css写一个简单的旋转立方体

最新推荐文章于 2025-03-03 21:48:12 发布

iimo

最新推荐文章于 2025-03-03 21:48:12 发布

阅读量615

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/qq_41569151/article/details/103910983

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了一个基于HTML和CSS的3D立方体动画实现过程。通过设置透视、旋转及阴影效果，创建了一个六面颜色各异且能进行无限旋转的立体正方体，展示了CSS3在网页设计中强大的三维图形能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

    <div class="world">
        <div id="cube" tabindex="0">
            <div id="cube__front"></div>
            <div id="cube__back"></div>
            <div id="cube__left"></div>
            <div id="cube__right"></div>
            <div id="cube__top"></div>
            <div id="cube__bottom"></div>
        </div>
    </div>

2.css

/*定义外层，perspective是透视角*/
.world {
    perspective: 800px;
    width: 200px;
    height: 200px;
    margin: 200px;
}

/*设置视图为3d，使用旋转动画*/
#cube {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    animation: rotator 5s linear infinite;
}

/*设置每一片的基础样式*/
#cube * {
    box-shadow: 0 0 3px currentColor;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*设置一定的翻转角度使6片形成正方体*/
#cube__front {
    color: deeppink;
    transform: translateZ(100px);
}

#cube__back {
    color: seagreen;
    transform: rotateY(180deg) translateZ(100px);
}

#cube__right {
    color: lightcoral;
    transform: rotateY(90deg) translateZ(100px);
}

#cube__left {
    color: skyblue;
    transform: rotateY(-90deg) translateZ(100px);
}

#cube__top {
    color: mediumseagreen;
    transform: rotateX(90deg) translateZ(100px);
}

#cube__bottom {
    color: dodgerblue;
    transform: rotateX(-90deg) translateZ(100px);
}


/*简单的动画*/
@keyframes rotator {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}