文章目录

一、认识3D
- 1.1 三维坐标系
二、3D移动 translate3d
- 2.1 透视 perspective
三、3D旋转
- 3.1 rotateX
- 3.2 rotateY
- 3.3 rotateZ
- 3.4 rotate3d
四、3D呈现 transform-style
五、案例
- 5.1 3D导航栏
- 5.2 旋转木马

一、认识3D

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子
有什么特点

近大远小。
物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

1.1 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

X 轴：水平向右注意：X右边是正值，左边是负值
Y 轴：垂直向下注意：y下面是正值，上面是负值
Z 轴：垂直屏幕注意：往外面是正值，往里面是负值

3D转换我们主要学习工作中最常用的3D位移和3D旋转
主要知识点

3D位移：translate3d(xy,z)
3D旋转： rotate3d(xy,)
透视： perspective
3D呈现： transfrom- style

二、3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

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

注意：

translateZ 沿着Z轴移动
translateZ 后面的单位一般跟px
translateZ(100px)向外移动100px（向我们的眼睛来移动的）
目前看不到效果，需要配合透视使用

语法：

transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px,100px,100px);

2.1 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z:就是z轴，物体距离屏幕的距离，轴越大（正值）我们看到的物体就越大

translform: translateZ(100px):仅仅是在Z轴上移动
有了透视，就能看到 translateZ引起的变化了

三、3D旋转

3D旋转指可以让元素在三维平面内沿看x轴，y轴，z轴或者自定义轴进行旋转。
语法

transform: rotate(45deg):沿着x轴正方向旋转45度
transform: otatey(45deg):沿着y轴正方向旋转45deg
transform: rotate(45deg):沿着Z轴正方向旋转45deg
transform: rotate3d( x, y, z, deg):沿着自定义轴旋转deg为角度（了解即可）

3.1 rotateX

对于元素旋转的方向的判断我们需要先学习个左手准则
左手准则

左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着X轴旋转的方向

3.2 rotateY

左手准则

左手的手拇指指向y轴的正方向
其余手指的弯曲方向就是该元素沿着/轴旋转的方向（正值

3.3 rotateZ

3.4 rotate3d

transform: rotate3d(xyz,deg):沿着自定义轴旋转deg为角度（了解即可）
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

/* 等同于 rotateX(45deg) */
/* transform: rotate3d(1,0,0,45deg); *//* 等同于 rotateY(45deg) */
/* transform: rotate3d(0,1,0,45deg); *//* 等同于:transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */
transform: rotate3d(1,1,1,45deg);

矢量旋转：
transform:rotate3d(1,1,0,45deg)

四、3D呈现 transform-style

先来看一下以下代码：

<style>body{perspective: 500px;}.box {width: 200px;height: 200px;margin: 0 auto;margin-top: 200px;position: relative;transition: all 2s;/* transform-style: preserve-3d; */}.box:hover{transform: rotateY(60deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: teal;}.box div:last-child{background-color: pink;transform: rotateX(60deg);}
</style>
<body><div class="box"><div></div><div></div></div>
</body>

旋转的效果：

可以发现我们的子元素的3D效果没有了，又变成了二维平面的了，怎么办呢？这时候就需要我们的 transform-style登场了。

控制子元素是否开启三维立体环境。。

transform- style:fiat子元素不开启3d立体空间默认的
transform- style: preserve-3d,子元素开启立体空间

代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用

接下来在 .box 加上：transform-style: preserve-3d;

效果：

五、案例

5.1 3D导航栏

效果：

<style>* {margin: 0;padding: 0;}ul {margin: 100px ;}ul li {width: 120px;height: 35px;list-style: none;perspective: 500px;float: left;margin: 0 5px;}.box {width: 100%;height: 100%;position: relative;transform-style: preserve-3d;transition: all .3s;}.box:hover{transform: rotateX(90deg);}.front,.bottom {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;}.front{background-color: pink;transform: translateZ(17.5px);}.bottom{background-color: teal;/* transform-origin: center bottom; */transform:translateY(17.5px) rotateX(-90deg);}</style>
<body><ul><li><div class="box"><div class="front">天行健</div><div class="bottom">地势坤</div></div></li><li><div class="box"><div class="front">天行健</div><div class="bottom">地势坤</div></div></li>...</ul>
</body>

5.2 旋转木马

效果：

<style>body{perspective: 800px;background-color: #ccc;}section {position: relative;width: 300px;height: 200px;margin: 350px auto;transform-style: preserve-3d;animation: rotate 15s infinite linear;background: url(../media/pig.jpg) no-repeat;}section div{width: 100%;height: 100%;position: absolute;top: 0;left: 0;/* 添加动画 */}section div img{width: 300px;height: 200px;}section:hover{animation-play-state: paused;}@keyframes rotate{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}section div:nth-child(1){transform: translateZ(300px);}section div:nth-child(2){/* transform:translateX(300px) rotateY(60deg); *//* 先旋转 再移动 */transform:rotateY(60deg) translateZ(300px);}section div:nth-child(3){transform:rotateY(120deg) translateZ(300px);}section div:nth-child(4){transform:rotateY(180deg) translateZ(300px);}section div:nth-child(5){transform:rotateY(240deg) translateZ(300px);}section div:nth-child(6){transform:rotateY(300deg) translateZ(300px);}
</style>
<body><section><div><img src="../media/1.jpg" alt=""></div><div><img src="../media/2.jpg" alt=""></div><div><img src="../media/3.jpg" alt=""></div><div><img src="../media/4.jpg" alt=""></div><div><img src="../media/5.jpg" alt=""></div><div><img src="../media/6.jpg" alt=""></div></section>
</body>

还不知道transform 3D转换怎么用？看这个就够了相关推荐

还不知道音频格式转换mp3软件哪个好？进来看看就知道了
有小伙伴求助说,自己在录制.制作一些音频文件时,发现很多工具输出的音频都是AAC.M4A等格式,这些格式在上传平台.传输给好友时都会遇到格式限制而导致传输失败的情况,所以想要找一些好用的软件来进行音频 ...
2019如何转换2010_9102年，你还不知道PPT怎么转换成视频吗？小心落伍了
你在刷抖音的时候有没有刷过这类视频: 成为人生赢家必备的书单.5个让你看透人性的电影.6个让你升职加薪的APP... 如果你细心观察的话,会发现这类视频的做法基本都是一个样的,像在翻相册一样,一页页过 ...
你还不知道怎么学习软件测试吗？看完这篇文章，你就明白了！
软件测试过程中,最主要的就是要掌握好软件测试的方法,掌握好了软件测试方法,有利于测试技能的大幅度提高. 软件测试方法 == 软件测试方法是指测试软件的方法.随着软件测试技术的不断发展,测试方法也越来越 ...
两个场景怎样合在一起_Spring AOP应用场景你还不知道？这篇一定要看
回顾一下Spring AOP的知识为什么会有面向切面编程(AOP)? 我们知道Java是一个面向对象(OOP)的语言,但它有一些弊端,比如当我们需要为多个不具有继承关系的对象引入一个公共行为,例如日 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
你还不知道如何去学习3D建模，那你来找我，我教你
一.3D建模工作岗位要是想从事3D建模,其中还有很工作岗位的.角色模型制作是较与场景模型制作,吃香很多,并且薪资更高. 3D建模是一个总称,在我们公司的项目上,3D建模分为:3D低模手绘(场景/角色 ...
2D转换和3D转换 transform
目录一.转换的概念二.2D转换 2.1 translate 2.2 scale 2.3 rotate 2.4 变形原点三.3D转换 3.1 景深 3.2 实现3d效果 3.3 3D位移 3.4 ...

还不知道transform 3D转换怎么用？看这个就够了