一、什么是3D？

与平面坐标系的2D相比，3D是三维坐标系，除了有X轴和Y轴，还多了垂直屏幕的Z轴，它的特点就是近大远小、物体后面遮挡不可见。所以有了3D就能使图片动画变得立体生动，下面就让我们来看看它的几个常用属性吧~

二、3D转换的常用属性

1.3D位移：translate3d(x,y,z)

用法：

translform:translateX(100px):仅仅是在x轴上移动；
translform:translateY(100px):仅仅是在y轴上移动；
translform:translateZ(100px):仅仅是在z轴上移动；
(注意：translateZ一般用px单位)
translform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离

注意：
xyz是不能省略的，如果没有就写0

上图就是三维坐标系，其中x轴：水平向右（为正值）；y轴：垂直向下（为正值）；z轴：垂直屏幕（往外面为正值，即越往外看到的图片就越大）。

2.3D旋转：rotate3d(x,y,z)

3D旋转指可以让元素在三维平面内沿着x,y,z轴或者自定义轴进行旋转.

语法：

transform:rotateX(45deg) :沿着x轴正方向旋转45度；

transform:rotateY(45deg) :沿着y轴正方向旋转45deg；

transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg；

transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)；

transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg；

下面我们来看一个由旋转实现的效果图：

图中的粉色盒子就是以x轴为中心，正方向旋转了120度。为了我们方便观看前后效果，我又将整体沿着y轴往左旋转了30度，具体代码如下：

<style>body {perspective: 500px;/*它是透视的意思，这里没看懂没关系，下面会讲这个属性*/}.box {position: relative;/*子盒子用了绝对定位，父盒子就要用相对定位*/width: 200px;height: 300px;margin: 100px auto;transform: rotateY(-30deg);/*整体盒子沿y轴向左转30度，为负方向所以为负值*/transform-style: preserve-3d;/*为了使3D呈现的属性，下面也会讲*/}.up1,.up2 {position: absolute;/*因为两个盒子要重叠放在一起所以要用定位*/width: 100%;height: 100%;}.up1 {background-color: skyblue;z-index: 1;/*为了让它在上面，提高它的优先级*/}.up2 {background-color: pink;transition: all 5s;/*过渡一下，使他变化的没那么生硬*/}.box:hover .up2 {transform: rotateX(120deg);/*当鼠标放上去的时候，粉色盒子开始转动角度*/}</style>
</head><body><div class="box"><div class="up1"></div><div class="up2"></div></div>
</body>

上面的图片其实是一个动态的效果，当鼠标放上去，粉色盒子就会转动，离开就归位，让人的视觉有一个3D变化的效果。

3.透视：perspective

透视也称为视距：视距就是人的眼睛到屏幕的距离

透视越大，物体越小
（这里不要和上面z轴的距离搞混了，因为z轴越大是离我们眼睛越近，所以物体越大，而透视代表的是人的眼睛到屏幕的距离，越大代表越远，所以看到的物体就小了）

透视的单位是像素

注意： 透视写在被观察元素的父盒子上面

举例（将图片沿x轴旋转60度）：
①：没加透视前

②往父盒子加了透视后：

相信大家都看出来了，加了透视后，我们很明显的能看到一种前大后小的效果，这就是透视的魅力~ 所以这也是重中之重，要想看到3d效果必须加透视，而且是在父盒子加！

4.3D呈现：transform-style

意义：控制子元素是否开启三维立体环境

语法：

transform-style：flat 子元素不开启3d立体空间（默认）

transform-style: preserve-3d; 子元素开启立体空间

注意：代码写给父级，但是影响的是子盒子
（这个属性很重要）

还是拿上面盒子倾斜为案例，在加了透视但是没加3D呈现时的效果：

尽管鼠标放上去了，也看不到任何效果，因为粉色盒子并没有按立体空间来展示，被转换成平面展示了，所以这里就要用到transform-style这个属性，来实现子元素开启立体空间。

当然在加上3D呈现效果后，结果就是第一个案例呈现的效果。

总结

想要实现3D转换效果，千万不要忘记写perspective和transform-style: preserve-3d，并且这两个属性都是加在父盒子上的哟，想要真正的掌握，就赶紧去试试吧~

带你领略3D转换的魅力~相关推荐

盛世昊通带你领略四驱MPV的魅力
如果说以前车友们买车更多看性价比,现如今的消费者购车选择则更倾向于高颜值高性能.现代人的生活条件不断提升,对汽车的硬件和软性要求也越来越高.盛世昊通作为一家完成数字化转型的汽车行业产业链平台,以客户需 ...
带你领略Clean架构的魅力，腾讯T3大佬亲自讲解
好像相对于上面那张图更好理解,知道为什么吗?因为字少了好多.哈哈.接下来的内容以及我的开源项目中都是以此为基础来写的.分别来解释下. 表现层 (Presentation Layer) 我们这里的表现层 ...
火星电竞：如何用最快的速度带你领略电竞的魅力
火星电竞APP是一个集英雄联盟,王者荣耀,DOTA2,CSGO等游戏相关资讯以及体育相关资讯的综合服务APP 1.电竞八卦,赛事资讯.赛事分析,TOP时刻等于游戏相关的一切讯息,并不是一个枯燥无味的赛 ...
探索未来的元宇宙虚拟博物馆，领略数字时代的文化魅力
随着数字技术的飞速发展,人们的生活方式正在发生翻天覆地的变化.而元宇宙,作为一种全新的数字世界,已经吸引了越来越多人的关注.在这个虚拟的世界里,人们可以探索未来,感受科技的魅力.而今天,我们要向大家介 ...
BATJ大数据架构师带你领略实时计算框架Flink的魅力！
你是不是经常体验或看到以下这些场景? "小张,你看能不能做个监控大屏实时查看促销活动销售额(GMV)?" "小王,我们现在搞促销活动能不能实时统计销量 Top3 啊?&q ...
带你领略Android Jetpack组件的魅力
1.前言最近简单看了下google推出的框架Jetpack,感觉此框架的内容可以对平时的开发有很大的帮助,也可以解决很多开发中的问题,对代码的逻辑和UI界面实现深层解耦,打造数据驱动型UI界面. A ...
这5部不容错过的超高评价纪录片，带你领略地球的魅力！
全世界只有3.14 % 的人关注了爆炸吧知识地球是茫茫宇宙星系中唯一生机勃勃万物生存的星球,它是瞬息万变.充满自然奇观的世界.50多亿年来,地球在日复一日.沧海桑田地变化着.今天就给大家带来最顶尖 ...
风云编程python-动态排名可视化 | 带你领略编程语言20年风云变化
原标题:动态排名可视化 | 带你领略编程语言20年风云变化作者 | 周萝卜来源 | 萝卜大杂烩 2019已经过去,回看编程语言20年真是风云变化! 从 TIOBE 榜(热门榜)上来看,Java.C ...
python动态排名可视化_动态排名可视化 | 带你领略编程语言20年风云变化
原标题:动态排名可视化 | 带你领略编程语言20年风云变化作者 | 周萝卜来源 | 萝卜大杂烩 2019已经过去,回看编程语言20年真是风云变化! 从 TIOBE 榜(热门榜)上来看,Java.C ...

带你领略3D转换的魅力~

文章目录