用动画做出一个正方体并且3d旋转，详解

本文链接：https://blog.youkuaiyun.com/manognlink/article/details/121600576

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个具有3D旋转的盒子模型，通过`preserve-3d`属性和关键帧动画实现动态效果，包括内外层盒子的hover交互。

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

首先，我们先设置一个大盒子（假如200px）利用 transform-style: preserve-3d; ，营造一个3d的大盒子

之后在这个大盒子中设置六个小盒子，并且设置定位，设置子绝父项，之后设置6个盒子样式，

正面盒子，向正面Z轴+100px transform: translateZ(100px);

后面盒子，向后面Z周-100px transform: translateZ(-100px);

上面盒子， x轴正值旋转90deg 向z轴正向走100px transform: rotateX(90deg) translateZ(100px);

下面盒子， x轴负值旋转90deg 向z轴正向走100px transform: rotateX(-90deg) translateZ(100px);

左面盒子， y轴正值旋转走90deg 向z轴走100px transform: rotateY(90deg) translateZ(100px);

右面盒子 y轴负值旋转走90deg 向z轴走100px transform: rotateY(-90deg) translateZ(100px);

这样一个3d的盒子就构造出来了

之后设置动画效果

@keyframes rotate {

from {

transform: rotateY(0deg) rotateX(0deg);

}

to {

transform: rotateY(360deg) rotateX(360deg);

}

设置两个旋转360deg，然后给大盒子设置animation: rotate 20s infinite linear;

用它来带动他的子盒子

之后还可以增加一个外层盒子，盒子的样式跟上面内层一样。之后在hover的时候设置Z轴增加100px即可，但是注意，因为hover也设置了transform，会与上面的样式层叠，导致上面的样式失效，所以还要早hover的时候也要设置原来该有的样式，这是这个效果最容易出现BUG的地方。

之后效果就可以出来。具体代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-color: rgb(0, 33, 35);
        }

        .box {
            margin: 200px auto;
            width: 200px;
            height: 200px;
            transition: all 2s;
            transform-style: preserve-3d;
            position: relative;
            animation: rotate 20s infinite linear;
        }

        /* 外层前面 */
        .box .wfront {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateZ(100px);
            opacity: 0.5;
        }

        /* 外层后面 */
        .box .wbehind {
            width: 200px;
            height: 200px;
            background-color: green;
            transform: translateZ(-100px);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
        }

        /* 外层上 */
        .box .wtop {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateX(90deg) translateZ(100px);
            opacity: 0.5;
        }

        /* 外层下 */
        .box .wbottom {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateX(-90deg) translateZ(100px);
            opacity: 0.5;
        }

        /* 外层左 */
        .box .wleft {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateY(90deg) translateZ(100px);
            opacity: 0.5;
        }

        /* 外层右 */
        .box .wright {
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateY(-90deg) translateZ(100px);
            opacity: 0.5;
        }

        @keyframes rotate {
            from {
                transform: rotateY(0deg) rotateX(0deg);

            }

            to {
                transform: rotateY(360deg) rotateX(360deg);
            }
        }

        .box:hover .iq {
            transform: rotateX(90deg) translateZ(200px);
        }

        .box:hover .iw {
            transform: rotateX(-90deg) translateZ(200px);
        }

        .box:hover .ie {
            transform: rotateY(90deg) translateZ(200px);
        }

        .box:hover .ir {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .box:hover .it {
            transform: translateZ(200px);
        }

        .box:hover .iy {
            transform: translateZ(-200px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="wtop">上面</div>
        <div class="wbottom">下面</div>
        <div class="wleft">左面</div>
        <div class="wright">右面</div>
        <div class="wfront">前面</div>
        <div class="wbehind">后面</div>
        <div class="wtop iq">上面</div>
        <div class="wbottom iw">下面</div>
        <div class="wleft ie">左面</div>
        <div class="wright ir">右面</div>
        <div class="wfront it">前面</div>
        <div class="wbehind iy">后面</div>
    </div>

</body>

</html>

直接复制即可。