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);
}
这时候我们发现左右边旋转的角度方向不能用上期分享的角度方向图来确定了,但我们只需把上期分享的角度方向图 正改为负,负改为正 即可表示左右边的角度方向