css3知识点

一、变换transform：

        1、移动translate(x,y)：

                translateX() 水平移动

                translateY()垂直移动

        2、旋转 rotate()

                rotateX(数值+角度deg)绕X轴旋转

                rotateY(数值+角度deg)绕Y轴旋转

                rotateZ(数值+角度deg)绕Z轴旋转

                        perspective透视

        3、缩放scale(x)，等比例缩放scale(x,y)

                  scaleX(缩放倍数)x方向缩放

                scaleY(缩放倍数)y方向缩放

        4、扭曲skew()

                skewX(数值+单位deg)

                skewY(数值+单位deg)

        5、变换基点transform-origin: x  y;可以用英文单词

二、关键帧Keyframes

                @keyframes  动画的名称{  

                        from{ }

                        to{ }

                }

        1、animation-name:    动画名称

                animation-name: none;

        2、animation-duration   动画持续时间

                取值:<time>为数值，单位为s （秒.）其默认值为“0

        3、animation-timing-function:    动画速度

                animation-timing-function:ease \linear \ ease-in \ ease-out \ ease-in-out \steps()

        4、animation-delay:    动画延迟时间

                取值为<time>为数值，单位为s(秒)，其默认值也是0

        5、animation-iteration-count  动画次数

                animation-iteration-count:infinite

        6、animation-direction    动画运动方向

                animation-direction: normal \ alternate \ reverse