CSS3样式二

一、2D

1. 2D平移：transform：translate()。参数：2个。分别是水平方向，和垂直方向。

2. 2D旋转：transform：rotate()。先要有一个transform-origin的定义（transform-origin：变换参照点）

3. 2D缩放：transform：scale()。只有1个参数时，水平方向与垂直方向同比例扩大或缩小；参数值代表放大的倍数，不需要单位。如果又有2个参数，代表水平与垂直。

4. 2D扭曲：skew()。

5. 组合操作：matrix()：参数6个。第一个与第四个为一组，分别代表水平和垂直缩放；第二个与第三个为一组，分别 代表水平垂直扭曲；第五个与第六个为一组，代表水平垂直移动距离。

二、3D

1. rotatX()：沿X轴的旋转；

2. rotatY()：沿Y轴的旋转。

三、自定义字体

@font-face声明。

例：

@font-face {

            font-family: "font";

            src: url(../ttf/简娃娃篆.ttf);

        }

        .div{

            font-family: font;

        }

四、过渡   transition

参数：

①　设置参与的属性；

②　过渡持续时间；

③　过渡动画类型：linear：线性；ease：平滑；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：由慢到快再慢；

④　延迟时间

注：过渡无法对：text-align，line-heigth，font-family等产生效果

五、动画。定义动画名称及效果，使用@keyframes；按规范必须定义从开始（0%）到结束（100%）的效果变化；将定义好的动画在元素内部进行调用animation（要注意兼容性效果）

@keyframes规则：创建动画；

Animation：

①　参数：动画名称；

②　持续时间；

③　过渡类型；

④　延迟时间；

⑤　循环次数：infinite 无限循环；

⑥　是否反向运动：normal/alternate