css transform几个简单的属性

transform基本属性

平移	translate ( x , y )	x代表水平方向平移的距离，y代表垂直方向平移的距离
缩放	scale ( 缩放倍数 )	缩放倍数为一个数值，若为1则不变
旋转	rotate ( ... deg )	围绕中心点旋转，deg 代表角度单位 “ ° ”，即“度”
扭曲	skew ( ... deg , ... deg)	第一个...deg代表矩形盒子垂直边倾斜的角度（即左右边），第二个...deg代表矩形盒子水平边倾斜的角度（即上下边）

平移：translate ( x , y )

.box{
    width: 200px;
    height: 200px;
    background: blue;
}
.box:hover{
    transform: translate(300px,400px);
}

 缩放：scale ( 缩放倍数 )

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: scale(2);
}

 旋转：rotate ( ... deg )

下面这张图是上期分享过角度deg的方向

 

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: rotate(-45deg);
}

 扭曲：skew ( ... deg , ... deg)

当括号里只有一个deg值时，表示的只是左右边的旋转角度，上下边仍保持不变

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: skew(-10deg,45deg);
}

这时候我们发现左右边旋转的角度方向不能用上期分享的角度方向图来确定了，但我们只需把上期分享的角度方向图 正改为负，负改为正 即可表示左右边的角度方向