一.CSS3变形transform

 

 1.平移：translate(x,y) translateX(x) translateY(y)  

  

  注意：如果想只向X轴平移那么可以translateX，如果想只向X轴平移那么可以translateY，X和Y不能共存。如果想向两个方向平移，那么使用translate

  

        y轴

      ^ -

      |

      |

      | 

      |

      |

      |

 - ---------------------------------> + x轴

      |

      | 

      |

      |

      |

      | +

 

 2.缩放： scale(x放大倍数，y放大倍数)  scaleX(x放大倍数) scaleY(Y放大倍数)

  

  注意：如果想放大那么写大于1的数，如果想缩小，那么写小于1的数

  

 3.倾斜： skew(x轴倾斜角度，y轴倾斜角度) skewX(x轴倾斜角度) skewY(y轴倾斜角度)

 

  注意：x轴为正值按照逆时针x轴为负值按照顺时针，y轴正值为顺时针倾斜，y轴负值为逆时针倾斜

 

 4.旋转： rotate(旋转角度) 正值为顺时针旋转，负值为逆时针旋转

 

二.CSS3过渡

 

 transition:需要过度的属性 过度时间(s) 过度动画函数 延迟时间(s)

 

  过渡动画函数：

   ease：速度由快到慢（默认值）

   linear：速度恒速（匀速运动）

   ease-in：速度越来越快（渐显效果）

   ease-out：速度越来越慢（渐隐效果）

   ease-in-out：速度先加速再减速（渐显渐隐效果）

   

 img:hover{

            transform: rotate(90deg) scale(1.2);

            transition: all 1s linear 1s;

    }

 

 过渡处罚机制：

  伪类触发

   ：hover

   ：active

   ：focus

   ：checked

  媒体查询：通过@media属性判断设备的尺寸，方向等

  JavaScript触发：用JavaScript脚本触发

  

三.CSS3动画

 1.设置关键帧

  @keyframes 关键帧名称{

            0%{

                width: 0;

                transform: scale(1.5);

            }

            33%{

                width: 60px;

                transform: translate(200px,0px) scale(2);

            }

            66%{

                width: 120px;

                transform: translate(300px,0px);

            }

            100%{

                width: 200px;

                transform: translate(400px,0px);

            }

        }

 2.调用关键帧

  animation: 关键帧名称 执行时间 播放方式 延迟时间 播放次数;