css3 中的 3D 转换效果有哪些，浏览器私有前缀兼容写法

html5/css3 基础篇（第三篇）

回顾

这次基本上是 html5/css3 最后的一部分内容了，一共 h5c3 分为了三讲，今天是最后一讲内容。回顾上一篇我们基本上学习了 css3 中一大部分的内容，我们学习了基于 transform 的移动、旋转、缩放等常用的效果，还掌握了 css3 2D 转换的综合写法，不仅如此还学习了 animation 动画效果，这些都是为 css3 实现更为酷炫的效果而学习的内容，而且也为 css 添加了很多可扩展的技能。看知识总是比较散漫的，如果想烂熟于心还是需要多加练习。

3D 转换概述

3D 在现在看来是十分普遍的存在，不管是应用到技术上来说还是应用到现实生活中的场景，都离不开 3D 效果的实现。在 c3 中也出现 3D 的效果，想要实现 3D 效果一般分为两种特点：

1. 近大远小

2. 物体后面遮挡不可见

还有一点就是三维坐标系

• X 轴：水平向右。注意：X 右边是正值，左边是负值

• Y 轴：垂直向下。注意：Y 下面是正值，上面是负值

• Z 轴：垂直屏幕。注意：往外面是正值，往里面是负值以上是 3D 中基本的概述，了解完这些基本的概述之后，我们可以尝试学习了 css3 中 3D 的位移

3D 转换学习内容——位移

1. 3D 位移：translate(x, y, z)

2. transform: translateX(100px); —— 仅仅在 x 轴上移动 100px

3. transform: translateY(100px); —— 仅仅在 y 轴上移动 100px

4. transform: translateZ(100px); —— 仅仅在 z 轴上移动 100px

5. transform: translate3D(x, y, z); —— 其中 xyz 分别指要移动的轴方向的距离

需要注意的是在 transform：translate 中如果一个一个写的话，下面内容会覆盖上面的内容 例如：

transform：translateX(100px)// y 会覆盖 xtransform: translateY(100px)

例如上面的代码，你肯定想的是将盒子的 x 移动 100px，再将盒子的 y 轴移动 100px，实际上 y 覆盖了 x 最后的效果仅仅是将 y 轴移动了 100px，如果想达到这种效果的话，需要简写形式

// 如果没有值的话可以写0代替// 这样的效果就是 x、y轴移动了 100px，Z轴不动transform: translate3D(100px, 100px, 0)

注意：想要实现 3D 效果的移动还需要将父盒子中加一个透视才能达到这样的效果。如下图

原始效果

呈现的 3D 效果

3D 转换学习内容——透视

透视：perspective

1. 如果想要在网页上产生 3D 效果需要透视（理解成 3D 物体投影在 2D 平面上）

2. 模拟人类的视觉位置，可认为安排一只眼睛去看

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

4. 距离视觉点越近的在电脑平面成像越大，越远城乡越小

5. 透视的单位是像素

透视需要写在被观察元素的父盒子上面

可以理解这种就是透视产生的效果 如下图

3D 转换学习内容——旋转

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

语法：

1. transform: rotateX(45deg); —— 沿着 X 轴正方向旋转 45 度

2. transform: rotateY(45deg); —— 沿着 y 轴正方向旋转 45 度

3. transform: rotateZ(45deg); —— 沿着 z 轴正方向旋转 45 度

4. transform: rotate3d(x, y, z, deg); —— 沿着自定义轴旋转 deg 为旋转角度如下图所示

初始状态：

旋转之后：

3D 呈现

3D 呈现：transform-style

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

2. transform-style: flat —— 子元素不开启 3d 立体控件 默认的

3. transform-style: preserve-3d —— 子元素开启立体控件

4. 代码写给父级，但是影响的是子盒子

5. 这个属性很重要，以后会用到

浏览器私有前缀

私有前缀：

• -moz-：代表 firefox 浏览器私有前缀

• -ms-：代表 ie 浏览器私有前缀

• -webkit-：代表 safari、chrome 私有前缀

• -0-：代表 opera 私有前缀

提倡的兼容性写法：

// 兼容 -moz- 写法-moz-border-radius: 10px;
// 兼容 -ms- 写法-ms-border-radius: 10px;
// 兼容 -webkit- 写法-webkit-border-radius: 10px;
// 兼容 -o- 写法-o-border-radius: 10px;

结束

好了，今天 css3 中的 3D 效果基本上就了解完了，下去自己可以在编辑器中写点小 demo 尝试一下，到现在 h5c3 基本上就结束了。自己可以好好的练习练习。接下里我们就要开启一些布局的内容，例如：flex 布局，rem、em 布局等内容。

大鹏一日同风起，扶摇直上九万里