CSS中2D、3D和动画(transition补间动画、keyframe关键帧动画和逐帧动画）简介

1.2D转换

2D/3D转换属性transform，2D变换方法包括：translate（平移）、rotate（旋转）、scale（缩放）、skew（倾斜）、matrix

<style> 
    div{
        width:100px;
        height:75px;
        background-color:red;
        border:1px solid black;
    }
    #div1{
        width:200px;
        height:100px;
        background-color:yellow;
        /*rotate（）方法 旋转：角度*/
        transform:rotate(30deg);
    }
    #div2{
        /*translate()方法 移动，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。*/
        transform:translate(50px,100px);
    }
    #div3{
        margin: 150px;
        width: 200px;
        height: 100px;
        background-color: yellow;
        border: 1px solid black;
        /*scale()方法 缩放，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：*/
        transform: scale(2,3); /* 标准语法 */
        /*skew()方法 倾斜，包含两个参数值，分别表示X轴和Y轴倾斜的角度。 *