transform属性
transform | 描述 |
---|---|
none | 不变换 |
transform-function | 一个或多个变换函数,以空格分开 |
我们主要讨论它进行变化时:
包含属性:
rotate
旋转skew
扭曲scale
缩放translate
移动
相关属性
-
transform-origin
旋转 缩放的基点 -
transform-style
元素是3d效果还是2d效果
rotate
旋转
概念
- 通过指定的角度参数对原元素指定角度的旋转
- transform-origin定义的是旋转的基点
- angle是指旋转角度,单位deg,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
用法
平面旋转(相当于3维空间内的Z轴旋转)
transform:rotate (<angle>);
3维空间内旋转
transform:rotate3d(<number>,<number>,<number>,<angle>)
3维空间内的X轴旋转
transform:rotatex(<angle>);
3维空间内的Y轴旋转
transform:rotatey(<angle>);
3维空间内的Z轴旋转
transform:rotatez(<angle>);
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 50vh;
margin-left: 50vh;
}
</style>
<body>
<div>
</div>
</body>
</html>
这是初始的样子
当我们将其旋转时
div{
height: 200px;
width: 200px;
background-color: aqua;
transform:rotate(30deg);
margin-top: 50vh;
margin-left: 50vh;
}
效果如下
translate
移动
概念
- 当值为正数时沿着右/下(看选择的是哪一个方向的移动)移动,当值为负数时沿着反方向移动
用法
2D平移
transform:translate();
水平平移
transform:translatex();
竖直平移
transform:translatey();
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 50vh;
margin-left: 50vh;
}
</style>
<body>
<div>
</div>
</body>
</html>
这是一开始的状态
移动后我们发现div
往左往上移动了一段距离
div{
height: 200px;
width: 200px;
background-color: aqua;x
transform:translateY(-20vh) translatex(-20vh);
margin-top: 50vh;
margin-left: 50vh;
}
效果图如下
scale
缩放
概念
- 值>1 放大
- 值<1 缩小
- 值=1 不变
用法
2D缩放
transform: scale()
水平缩放
transform: scalex()
垂直缩放
transform: scaley()
例子
首先,我们定义一个200*200的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 50vh;
margin-left: 50vh;
transform: scale(1.2);
}
</style>
<body>
<div>
</div>
</body>
</html>
效果图如下
当我们将其进行缩放时
div{
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 50vh;
margin-left: 50vh;
transform: scale(2);
}
效果图如下:
skew
扭曲
概念
- 单位为
deg
用法
斜切扭曲
transform:skew()
水平方向扭曲
transform:skewx()
垂直方向扭曲
transform:skewy()
例子
首先,我们设置一开始的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 50vh;
margin-left: 50vh;
}
</style>
<body>
<div>
</div>
</body>
</html>
当我们将其扭曲后
div{
height: 200px;
width: 200px;
background-color: aqua;
transform:skewX(20deg);
margin-top: 50vh;
margin-left: 50vh;
}
效果图如下