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)

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

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

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

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

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

transform：translateX(100px)
// y 会覆盖 x
transform: 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布局等内容。

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