CSS3新特性

一、css3现状

• 浏览器支持程度差，需要添加私有前缀
• 移动端支持优于PC端
• 不断改进中
• 应用相对广泛

二、2D 转换

转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）你可以简单理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

2.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。

 2.2 2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1. 语法

transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);

2. 重点

• 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
• translate最大的优点：不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
• 对行内标签没有效果

 2.3 2D 转换之移动 translate

2.4 2D 转换中心点 transform-origin

2.5 2D 转换之缩放scale

2.6 2D 转换综合写法

2.7 2D 转换总结

三、动画

动画（animation） 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常

用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

3.1 动画的基本使用

1. 用keyframes 定义动画（类似定义类选择器）

动画序列

2. 元素使用动画

3.2 动画常用属性

3.3 动画简写属性

3.4 速度曲线细节

四、3D转换

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

有什么特点

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

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

3.1 三维坐标系

3.2 3D移动 translate3d

3.3 透视 perspective

3.4 translateZ

3.5 3D旋转 rotate3d

3.6 3D呈现 transfrom-style

五、H5C3 综合案例

六、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1. 私有前缀

2. 提倡的写法

八、总结

CSS3

1. CSS3 新增加的属性、结构伪类、伪元素选择器

2. CSS3 2D 移动、旋转和缩放属性

3. CSS3 动画设置方法

4. CSS3 3D 移动、旋转和缩放属性