css3小知识1

一、蒙版

-webkit-mask
    显示有颜色的地方

二、旋转

  transform
            rotate()                Z轴旋转
            rotateX()               X轴旋转
            rotateY()               Y轴旋转

透视

    transform: perspective(透视值); 
        值   推荐800-1200
            大   不明显
            小   明显
translate(x,y)          x轴y轴平移
translateZ()            Z轴平移

想要改变translateZ，那父级元素必须变成3D
    -webkit-transform-s tyle: preserve-3d;
    父级一定要透视
    如果父级有旋转XY之类的
    -webkit-transform: perspective() rotateX/Y();
    如果父级什么都不需要
    perspective: 800px;

transform注意：
    1.执行有顺序(后面的先执行)
    2.行元素有问题(不能操作行元素)

三、运动

transition: duration type-style timing-function delay;

（1）高级动画

    animation
    定义一个动画
        @keyframes name{
            from{}
            to{}
        }
    调用一个动画
        animation: name duration ...;
    贝塞尔曲线
    cubic-bezier(x1,y1,x2,y2)
   （a）名字
    -webkit-animation-name: toBig;      
   （b）运动时长
    -webkit-animation-duration: 1s;
   （c） 运动类型
    -webkit-animation-timing-function: ease;
   （d）迭代次数  infinite 无限
    -webkit-animation-iteration-count: infinite;
   （e）方向        alternate
    -webkit-animation-direction: alternate;
    （f）播放状态
    -webkit-animation-play-state: paused|running;
    （g）延迟
    -webkit-animation-delay:;
    （h）停在那
    -webkit-animation-fill-mode: backwards;