CSS3新特性

css3的现状：

（1）新增的css3特性有兼容性问题，IE9以上才支持。

（2）移动端支持优于pc端。

下面只是我平时所常用到的一些css3新特性：

1，新增calc函数

​ 此函数可以让我们在写css样式时执行一些动态的计算。

​ 例如：使子盒子的宽度永远比父盒子小30px。

​ width: calc(100% - 30px);

2，新增过渡（transition）

transition：需要添加过渡的属性、花费时间、运动曲线、何时开始。

3，css2D转换（transform）

新增的2D转换是改变标签在二维平面上的位置和形状的一种技术，它可以实现元素的位移、旋转、缩放。

（1）2D转换之translate（位移）

​ 语法：transform：translate(x, y);

​ transform：translateX(n);

​ transform：translateY(n);

​ translate最大的优点就是位移时并不会影响到其他的元素。

（2）2D转换之rotate（旋转）

​ 语法：transform：rotate(45deg)。当然了，也可以通过transform-origin：（x， y）修改旋转的中心点（默认旋转点是元素的中心点）。

（3）2D转换之scale（缩放）

​ 语法：transform：scale（x， y）。

4，新增动画（animation）

​ 相比于过渡，动画可以设置的更为复杂一点。

​ 动画的基本使用：

​ （1）先定义动画： @keyframes 动画名称。

​ （2）再使用动画。

​ 动画的一些常用属性：

​ animation-name：前面所规定的动画名称。

​ animation-duration：动画完成一个周期所需要的时间。

​ animation-timing-function：动画的运动曲线。

​ animation-delay：动画何时开始。

​ animation-iteration-count：动画被播放的次数。

5，css3D转换

​ 这里我们主要学习3D转换的位移和旋转。

​ （1）3D转换之位移（translate3d）

​ 相对于2D转换的位移多了一个z轴的方向而已。

​ 用法：transform：translate3d（x，y， z）。

​ （2）3D转换之旋转（rotate3d)

​ 用法：transform：rotateX（45deg）