C3的2d和3d

第一课    transition  过渡
1.   transition - property   要运动的样式
                 transition - property  ：attr                               具体属性过渡
                 例如  ：  transition ：500ms   width；              500毫秒只有宽度变化

                 transition - property  ：all                所有参数过渡
                
                 transition - property  ：none

2.  transition - duration              运动时间
3.  transition - delay                    延迟时间
4.transition - timing - function        运动形式
    属性  ：        linear   匀速
                        ease   逐渐变慢
                        ease-in  加速
                        ease-out  减速
                        ease - in - out   先加速在减速
                        cubic-bezier     贝塞尔曲线   （x1 ,  y1 ,  x2  , y2）      http//www.matthelein.com/ceaser
5.transition : 2s width,3s 2s height, 5s 1s background ；
                     2秒宽度变化完成，延迟2秒后，3秒完成高度变化，延迟1秒后，5秒完成背景变化
                   
 第二课                 样式每改变一次，就会调用一次transition
      transition    过渡完成事件         意思就是      事件发生在过渡完成之后    
      
    1. webkit 内核  ：   obj.addEventListener ( "WebkitTransitionEnd",function(){},false )
    2.firfox  内核    ：   obj.addEventListener( "Transitionend",function(){},false )


第三课                2d变化
1. transform    变化
     -webkit-transform：rotate（30deg）         旋转函数   取值度数        1.rotateX（）  2.rotateY（）   3.rotateZ（）
     -webkit-transform-origin                             旋转的基点
    -webkit-transform：skew（30deg）             斜切；倾斜                                1.skewX（）    2.skewY（）    4.skewZ（）
    -webkit-transform: scale(2);                           缩放                                1.scale（）        2.scaleX（）    3.scaleY（）
    -webkit-transform-translate（100px）         位移                                -webkit-transform-translateX（100px） 左→右
                                                                                                                -webkit-transform-translateY（100px）上→下
    -webkit-transform-translate（-100px，200px）                                
    -webkit-transform: rotate(720deg)  skew(30deg)  scale(2)  translate(500px);
第四课            matrix    矩阵
1.-webkit-transform：matrix（1，0，0，1，0，0）
2.-webkit-transform：matrix（a，b，c，d，e，f）        矩阵函数
    通过矩阵函数实现缩放
        x 轴缩放  ： a=x*a    c=x*c    e=x*e
        y轴缩放    ：b=y*b    d=y*d    f=y*f
    通过矩阵函数实现位移
        x 轴缩放  ： e=e+x
        y轴缩放    ：f=f+y
    通过矩阵函数实现倾斜
        x 轴缩放  ：c = Math.tan(xDeg/180*Math.PI)
        y轴缩放   ：b= Math.tan(yDeg/180*Math.PI)
     通过矩阵函数实现旋转
        a=Math.cos(deg/180*Math.PI)
        b=Math.sin(deg/180*Math.PI)
        d=Math.cos(deg/180*Math.PI)
        c=-Math.sin(deg/180*Math.PI)
兼容IE9以下版本只能通过矩阵来实现
filter：
progid：DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod="auto expand");
IE以下的矩阵没有E和F这两个参数M11==a,  M12==c,  M21==b,  M22==d
第五课         3d变化
1.创建3d     ：     -webkit-transform-style : preserve-3d
2.景深         ：    -webkit-perspective:100px;            由远到近的效果
3.景深基点    ：    perspective-origin
4.隐藏背面    ：       backface-visibility
5.transform新增的属性 ：    
                             rotateX 
                             rotateX 
                             rotateX 
                             translateZ
                             scaleZ
动画
格式1：@keyframes  动画名称
{
    动画状态
}
调用webkit-animation：2s   move（只是一个名字而已）
例如：@-webkit-keyframes   move（只是一个名字而已）
{    
    0%{width：100px}                        关键帧
    100%{width：500px}
}
webkit-animation：2s   move（只是一个名字而已）
animation属性：animation-delay       动画延迟
                            animation-iteration-count                    infinite（无线重复次数）                重复次数
                             animation-direction                播放重置
                                                                  （alternate：动画直接从上一次停止的位置开始执行）
                                                                    （normal：动画从第二次直接跳到0%的状态开始实行）
                            
                                           
格式2：






                                                                                                                            




























复制代码

转载于:https://juejin.im/post/5c9363ba6fb9a071061efbcf