css 实现3D立方体效果

最新推荐文章于 2025-06-09 09:42:03 发布

王海虎

最新推荐文章于 2025-06-09 09:42:03 发布

阅读量458

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/xiaohu12685/article/details/85072636

css 专栏收录该内容

4 篇文章

订阅专栏

本文分享了一个使用CSS实现的3D立方体旋转动画效果，通过精确的transform属性设置，构造了六个面并使其沿Y轴旋转，形成流畅的3D视觉体验。

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

前两天需要用到一个3D立方体的效果，知道c3可以写但一直都没试过，然后自己写了一下效果还不错，想着跟大家分享一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    .box{
        width: 300px;
        transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        animation: rotating3d 10s linear 2s infinite;
        position: absolute;
        top: 220px;
        left: 409px;
    }
    @keyframes rotating3d {
        from{
            transform: rotateY(0deg);
            -webkit-transform-style: preserve-3d;
        }
        to{
            transform: rotateY(360deg);
            -webkit-transform-style: preserve-3d;
        }
    }
    .box>div{
        width: 300px;
        height: 300px;
        transform: rotateX(-55deg);
        -webkit-transform-style: preserve-3d;
    }
    .box>div >ul{
        width: 300px;
        height: 300px;
        position: relative;
        list-style: none;
        transform: rotateY(-45deg);
        -webkit-transform-style: preserve-3d;
    }
    .box>div >ul >li {
        width: 300px;
        height: 300px;
        color: #fff;
        font-size: 60px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        text-align: center;
        background: #5b88f9;
        border: 3px solid #fff;
        opacity: 0.3;
    }
    /*构造六个面*/
    .box>div >ul >li:nth-child(1) {
        -webkit-transform: rotateX(90deg) translateZ(110px);
    }
    .box>div >ul >li:nth-child(2) {
        -webkit-transform: rotateX(270deg) translateZ(110px);
    }
    .box>div >ul >li:nth-child(3) {
        -webkit-transform: rotateY(90deg) translateZ(110px);
    }
    .box>div >ul >li:nth-child(4) {
        -webkit-transform: rotateY(270deg) translateZ(110px);
    }
    .box>div >ul >li:nth-child(5) {
        -webkit-transform: translateZ(-110px);
    }
    .box>div >ul >li:nth-child(6) {
        -webkit-transform: translateZ(110px);
    }
</style>

<body>
    <div class="box">
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </div>
</body>
</html>