知识点八

1、公共样式的提取

2、CSS2d 的转换

transform:translate(x,y) rotate(30deg)
//位移（）旋转()

translate(x,y)
//位移

rotate（）
//旋转

scale（x，y）
//缩放

skew（x,y）
//倾斜，配合transform属性使用

例子：

//HTML
正常
     
位移
     
旋转
     
缩放
     
斜切

//CSS
    div {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 20px;
            /*公共样式的提取*/
        }

        .box {
            transform: translate(200px, 30px);
            /*位移*/
        }

        .box1 {
            transform: rotate(30deg);
            /*旋转*/
        }

        .box2 {
            transform: scale(0.8, 0.5);
            /*缩放*/
        }

        .box3 {
            transform: skew(10deg, 10deg);
            /*斜切*/
        }

2.1translate位移

该元素移动的位置，决定于宽度（x轴）和高度（y轴）

translate(x,y)
//x轴坐标方向移动的距离，y纵坐标方向移动的距离div1#div2

2.2rotate旋转

2.3 scale缩放

scale缩放（）方法，该元素增加或减少的大小，取决于宽度（x轴）和高度（y轴）的参数。
//scale(2,3)转变宽度为原来的大小的2倍和其原始大小3倍的高度

2.4skew倾斜

倾斜skew(x,y)方法
//代表水平方向，y轴代表垂直方向

3、transition过渡

CSS3过渡（transition）配合hover使用

//改变宽度时长为2s

div{transition:width:2s}
div:hover{width:100px;}

多项变化

div{
transtion:width2s,height2s,transform2s;
//transtion:all 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(300deg）}

例子：

//HTML

//CSS
 * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: 10s all;
        }

        .box:hover {
            width: 500px;
            height: 500px;
            background-color: pink;
            transform: rotate(180deg) scale(0.8, 0.5);

        }