3D动画立方体实现

最新推荐文章于 2023-07-17 21:10:19 发布

staller_y

最新推荐文章于 2023-07-17 21:10:19 发布

阅读量2.6k

点赞数 4

分类专栏： css3 文章标签： css3 动画 3d

本文链接：https://blog.csdn.net/VoxAnguli/article/details/72828148

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3D立方体解析

对于CSS3新增的属性，我们觉得最炫酷的应该最属于3D变换和2D变换以及动画了吧！
下面我将自己对transform中rotate、translate的理解和大家分享一下！

3D坐标演示

3D坐标图演示

值得注意的是：这个坐标系和我们平时理解的不一样，这里的y轴向上方向是负的

而我们的z轴的方向其实就是我们面向浏览器的方向。假如我们的视角在红色的正前方，那么从红色一层到紫色一层往里面看的方向就是z轴的方向。

语法解释

transform:rotateX(40deg);
//这句话解释该元素绕X轴顺时针旋转40度
tranform:rotateY(40deg);
//该元素绕y轴顺时针旋转40度
transform:rotateZ(-40deg);
//该元素绕z轴逆时针旋转40度
transform:translateX(50px);
//该元素朝x轴的正方向（右）移动50像素
transfrom:translateY(-50px);
//该元素朝y轴的负方向（上）移动50像素
transform:translateZ(50px);
//该元素朝z轴的正方向（朝向我们）移动50像素
transform:translateZ(-50px);
//该元素朝z轴负方向（往屏幕里面）移动50像素

下图是以上代码的实例图：

3D立方体分解图

这里运用到了perspective这个属性，他的中文翻译是“透视”的意思。
这里写图片描述

语法是：perspective:numbernumber越大，（我们的视角离图像越远）也就是眼睛看图像的距离越远。
这个属性可以 设置在需要定义透视的元素上 也可以 设置在它的父元素上。
学过素描或者建筑的同学比较好理解。

举个栗子：也就是我们看远方的山，我们站的远处的时候会觉得这个山很小很矮，但是当但我们站在山下的时候，我们又会觉得这座山很大很高，其实他的大小并没有改变。用一句成语来说就是“一叶障目不见泰山”。
同样的，perspective-origin只有在设置了perspective属性后才能够有作用
perspective-origin的中文意思是“视角原点”，默认的是3D元素的中心。
语法是：perspective-origin: x y; 这里x，y是距离x轴和y轴的距离。

制作3D立方体

这里写图片描述

第一步：书写html结构

<div class="wrap">
        <div class="box">
            <div class="cube cube-1">前</div>
        </div>
        <div class="box">
            <div class="cube cube-2">后</div>
        </div>
        <div class="box">
            <div class="cube cube-3">左</div>
        </div>
        <div class="box">
            <div class="cube cube-4">右</div>
        </div>
        <div class="box">
            <div class="cube cube-5">上</div>
        </div>
        <div class="box">
            <div class="cube cube-6">下</div>
        </div>
    </div>

第二步：为html结构增加样式

        div{box-sizing:border-box;}
        //为整个盒子设置3d视角，也就是我们看到的是一个3d的图像，而不是2d的
        .wrap{
            position: relative;
            transform-style: preserve-3d;
        }
        //参考盒子，也就是cube最原始的位置
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            border:1px dotted #178eee;
            margin: 100px;
            float: left;
        }
        .cube{
            position: absolute;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            background-color: #178eee;
            opacity: 0.6;
        }

为每个面设置样式

我们可以分别对六个面进一一设置
为了区分面，我们为每个面设置一个颜色！

对第一个面设置位置及角度（cube-1）前

.cube-1{
    background-color: coral;
    transfrom: perspective(1200px) translateZ(100px);
}

对第二个面设置位置及角度（cube-2）后

.cube-2{
    background-color: #ee33cc;
    transform:perspective(1200px) translateZ(-100px);
}

对第三个面设置位置及角度（cube-3）左

.cube-3{
    background-color: #33aadd;
    transform:perspective(1200px)  rotateY(-90deg) translateZ(100px);
}

对第四个面设置位置及角度（cube-4）右

.cube-4{
    background-color: #aadd44;
    transform:perspective(1200px)  rotateY(90deg) translateZ(100px);
}

对第五个面设置位置及角度（cube-5）上

.cube-5{
    background-color: #ee172c;
    transform:perspective(1200px)  rotateX(90deg) translateZ(100px);
}

对第六个面设置位置及角度（cube-6）上

.cube-6{
    background-color:#178eee;
    transform:perspective(1200px)  rotateX(-90deg) translateZ(100px);
}

最后将box盒子上的position:relative改成absolute，把所有3D元素上的perspective:(1200px)定义到父元素wrap上就可以实现立方体效果了。

注意！！！如果需要对一个元素进行连续的转换（transform），那么就设置在一个transform上，如果你同一元素上设置第二个transform属性，那么后面的就会覆盖掉前一个。

这里将视角定义在每个具体的元素上，是因为我们在目前操作旋转的时候看到的是每个具体的元素，而不是看整体。最后我们将视角定义在父元素上，看到的就是整体的效果。

我们试一下将perspective:1200px设置在该元素的父元素上的效果是什么？

下图是定义在父元素的perspective属性：定义一个视角，我们看到的就是整体，同一视角看过去本身是同样大小同一个方向的元素，就会有偏差。
这里写图片描述
下面是每一个元素都有自己的一个视角，那么不管从哪个角度看过去，他都是那个样子。

做一个动画效果！

@keyframes show{
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
    }
}
.wrap{
    animation: show 6s infinite;
}

把动画引入到整个立方体上，我们的有动画的3D立方体就完成了！

最终实现代码

如下图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D立方体</title>
    <style>
    div{box-sizing: border-box;}
        .wrap{
            position: relative;
            transform-style: preserve-3d;
            margin: 400px;
            animation: show 6s infinite;
            perspective:(1200px);
        }
        .box{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .cube{
            position: absolute;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            width: 100%;
            height: 100%;
            background-color: #178eee;
            opacity: 0.6;
        }
        .cube-1{
            background-color: coral;
            transform:translateZ(100px);
        }
        .cube-2{
            background-color: #ee33cc;
            transform:translateZ(-100px);
        }
        .cube-3{
            background-color: #33aadd;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube-4{
            background-color: #aadd44;
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube-5{
            background-color: #ee172c;
            transform:rotateX(90deg) translateZ(100px);
        }
        .cube-6{
            transform:rotateX(-90deg) translateZ(100px);
        }
        @keyframes show{
            0%{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">
            <div class="cube cube-1">前</div>
        </div>
        <div class="box">
            <div class="cube cube-2">后</div>
        </div>
        <div class="box">
            <div class="cube cube-3">左</div>
        </div>
        <div class="box">
            <div class="cube cube-4">右</div>
        </div>
        <div class="box">
            <div class="cube cube-5">上</div>
        </div>
        <div class="box">
            <div class="cube cube-6">下</div>
        </div>
    </div>
</body>
</html>

有兴趣的小伙伴们，可以将它复制到自己的html文档中，看看效果哦！

staller_y

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
3D动画立方体实现

3D立方体解析对于CSS3新增的属性，我们觉得最炫酷的应该最属于3D变换和2D变换以及动画了吧！下面我将自己对transform中rotate、translate的理解和大家分享一下！3D坐标演示值得注意的是：这个坐标系和我们平时理解的不一样，这里的y轴向上方向是负的而我们的z轴的方向其实就是我们面向浏览器的方向。假如我们的视角在红色的正前方，那么从红色一层到紫色一层往里面看的
复制链接

扫一扫