transform的含义是:改变,使…变形;转换。
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
X:水平方向位移,Y:垂直方向位移。其中数值可以为负数,负数反方向移动
transform:rotate():
含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/564.css">
</head>
<body>
<div>
<p>类似的客服经理的减肥</p>
</div>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
}
显示图为:
用transform:rotate转变135deg之后:
div{
width: 200px;
height: 200px;
background: red;
transform: rotate(135deg)
}
显示图为:
transform:skew():
含义:倾斜;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,大于1.0则放大,小于1.0则缩小。