25CSS3中的3D转换

技术交流QQ群:1027579432，欢迎你的加入！

1.现实中的3D有什么特点？

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

2.三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴：水平向右。注意：x右边是正值，左边是负值
- y轴：垂直向下。注意：y下面是正值，上面是负值
- z轴：垂直屏幕。注意：向外是正值，向内是负值

3.3D转换主要学习内容

3D转换主要学习工作中最常用的3D位移和3D旋转。主要知识点有：
- 3D位移：translate3d(x, y, z);
- 3D旋转：rotate3d(x, y, z);
- 透视：perspective;
- 3D呈现transform-style;

3.1 3D转换之移动translate3d

3D移动在2D移动的基础上多增加了一个可以移动的方向，就是z轴方向。
- transform: translateX(100px); 仅仅是在x轴上进行移动；
- transform: translateY(100px); 仅仅是在y轴上进行移动；
- transform: translateZ(100px); 仅仅是在z轴上进行移动，translateZ一般用px为单位；
- transform: translate3d(x, y, z); 其中x、y、z分别指的是移动轴方向上的距离。

3.2 3D转换之透视perspective[重点]

在2D平面上产生近大远小视觉立体，但是那仅仅效果是二维的。
- 如果想要在网页上产生3D效果，则需要透视（理解为3D物体投影在2D平面内）；
- 模拟人类的视觉位置，可认为安排一只眼睛去看；
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离；
- 距离视觉点越近的电脑平面成像越大，越远成像越小；
- 透视的单位是像素px；
透视写在被观察元素的父级盒子上，d就是视距，视距是一个距离，即人的眼睛到屏幕的距离。

3.3 translateZ

translateZ(100px)：仅仅是在Z轴上进行移动。有了透视以后，就能看到translateZ引起的变化了。
z：指的是z轴，物体到屏幕的距离，z轴越大(正值)，我们看到的物体就越大。

3.4 3D转换之rotate3d旋转

3D旋转指的是可以让元素在三维平面中沿着x轴、y轴、z轴或者自定义轴进行旋转。
语法：
- transform: rotateX(45deg); 沿着x轴正方向旋转45度；
- transform: rotateY(45deg); 沿着y轴正方向旋转45度；
- transform: rotateZ(45deg); 沿着z轴正方向旋转45度；
- transform: rotate3d(x, y, z, 45deg); 沿着自定义轴旋转deg度；
对于元素旋转的方向判断：需要先学习一个左右准则。
rotateX左手准则：
- 左手的大拇指所指向的方向就是x轴的正方向；
- 其余手指的弯曲方向就是该元素沿着x轴旋转的正方向；
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Su60AU0f-1578820038189)(https://upload-images.jianshu.io/upload_images/13407176-bef3a47b46416e6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
rotateY左手准则：
- 左手的大拇指所指向的方向就是y轴的正方向；
- 其余手指的弯曲方向就是该元素沿着y轴旋转的正方向；

3.5 3D转换之transform-style呈现

控制子元素是否开启三维立体空间；
transform-style: flat 子元素不开启3D立体空间，默认的；
transform-style: preserve-3d; 子元素开启3D立体空间；
代码写在父级盒子上，但是影响的却是子盒子；
这个属性很重要，后面必用！

4.浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
私有前缀：
- -moz-:代表firefox浏览器私有属性；
- -ms-:代表ie浏览器私有属性；
- -webkit-:代表safari、chrome浏览器私有属性；
- -o-:代表Opera私有属性；

提倡写法：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

5.资料下载

笔记及代码，欢迎star,follow,fork…

25CSS3中的3D转换相关推荐

HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
CSS3中的2D和3D转换知识介绍
一 2D转换转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
CSS3 中3D转换--旋转正方体，滚动照片墙的写法
首先给父元素加两个属性,把父元素变成3D空间. (1)transform-style:preserve-3d; (观察的场所 3D空间) (2)perspective:1000px;(近大远小–景深p ...
CSS3 2D和3D转换 Transform
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate).拉伸(scale).平移(move).倾斜(skew)等,利用Transform和javascript ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...

25CSS3中的3D转换

技术交流QQ群:1027579432，欢迎你的加入！

1.现实中的3D有什么特点？

2.三维坐标系

3.3D转换主要学习内容

3.1 3D转换之移动translate3d

3.2 3D转换之透视perspective[重点]

3.3 translateZ

3.4 3D转换之rotate3d旋转

3.5 3D转换之transform-style呈现

4.浏览器的私有前缀

5.资料下载

25CSS3中的3D转换相关推荐

最新文章

热门文章