前端基础总结之css 10_css3_3D

知识导航：

• 透视：perspctive
• 3D 位移：translate3d(x, y, z)
• 3D 旋转：rotate3d(x, y, z)

正文之前

先来解释一下页面的三维坐标系

• x轴：还是水平向右（正值方向）
• y轴：竖直向下（正值方向）
• z轴：垂直于屏幕向外（正值方向）

1. 透视属性perspective及3D呈现 transfrom-style

1.1 透视属性

如果想使我们的页面产生3D效果则必须添加这个属性，透视也被称为视距。视距所指如下图：

注意这个人是模拟出来，因为视距d是由我们自己进行规定的。它实际上模仿人类的视觉位置，即视为安排一只眼睛去看。因为三维中近大远小。当我们设置好了视距。使元素沿z轴移动的时候就会有了三维的效果。

解释一下如图：

总之一句话，没有透视就没有c3的3D效果。且透视属性需要写在被视察元素的父盒子上面

1.2 3D呈现

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

总之子元素要做3D效果，一定要给其父元素加上此属性。使子元素以3D效果呈现出来。就相当于搭建了一下3D的舞台，把子元素一个个都3D化。

属性：transform-style

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间
• 要给父级加

2. 3D 位移：translate3d(x, y, z)

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向。使用均是与2D一样。（2D不清楚的话请看我那篇2D的博文）

• transform: translateX(100px)： x 轴上移动

• transform: translateY(100px)： y 轴上移动

• transform: translateZ(100px)： z 轴上移动

• 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充；且各个值之间使用逗号隔开

3. 3D 旋转：rotate3d(x, y, z)

同样基本使用和2D一样；

• transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
• transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
• transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
• transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

与2D不同之处：
2D是在屏幕表面进行旋转，如这样

3D是沿坐标轴来旋转的，如transform: rotateX(360deg) 。效果图如下：

2D的默认原点是盒子的中心。而3D的则是在其中心作三维坐标系。

z轴这里不好画，即垂直屏幕向外。

接下介绍我们的旋转方向。
问：2D中只有正负之分，正值为顺时针放下。但是3D呢？
答：当然同样也是很简单，介绍一下我们前端中的左手准则。
以transform: rotateY(360deg)为例。判断添加了这个属性的盒子旋转方向。
左手准则如图：

因为transform: rotateY(360deg)360deg为正值。即认为是Y轴的正方向，如上图大拇指指向轴的方向。其他手指的方向即是盒子的旋转方向。

即transform: rotateY(360deg)开始时是先向屏幕内旋转的。看一下效果图

3.1 除了按照传统的三个坐标轴之外还能进行自定义坐标轴

语法
transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度。
解释：
这里的x，y，z均是矢量。它们的值一般不是0就是1 。
如：transform: rotate3d(1, 0, 0, 180deg) 即为 沿着 x 轴旋转 180deg
再如：
transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 180deg
图解：