文章目录
- 一、什么是2D转换
- 二、rotate() 方法（旋转）
- 三、translate() 方法（位移）
- 四、scale() 方法（缩放）
- 五、skew() 方法 （倾斜）
一、什么是2D转换
在二维空间下对元素进行移动、缩放、转动、拉长或拉伸。
二、rotate() 方法（旋转）
在一个给定度数，正值是顺时针旋转元素，负值是逆时针旋转元素。
语法：
rotate(a)
选项参数：
a：是一种<angle>，表示旋转的角度。正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rotate 方法演示</title>
<style>
div
{
width:200px;
height:100px;
text-align:center;
line-height:100px;
background-color:red;
color:white;
border:1px solid gray;
margin-top:10px;
}
div.rotate
{
transform:rotate(180deg); //顺时针旋转180度
}
</style>
</head>
<body>
<div>hellow world!</div>
<div class="rotate">hellow world!</div>
</body>
</html>
运行结果：
三、translate() 方法（位移）
根据X轴（正值向右、负值向左）和Y轴（正值向下、负值向上）位置给定的参数，从元素当前位置移动。
语法：
translate(a,b)
选项参数：
a：在x轴方向上平移的距离
b：在y轴方向上平移的距离
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate 方法示例</title>
</head>
<body>
<div class="container">
<div class="text">hello world</div>
</div>
</body>
<style>
.container {
margin-top: 100px;
margin-left: 100px;
width: 400px;
height: 400px;
border: 1px solid gray;
}
.container .text {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
background: red;
transform: translate(50px, 100px);
}
</style>
<script>
</script>
</html>
运行结果：
四、scale() 方法（缩放）
用于修改元素的大小，可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
语法：
scale(sx, sy)
选项参数：
sx：<number>，表示缩放向量的横坐标。
sy：<number> ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。从而使得元素在保持原有形状下均等缩放
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale 方法示例</title>
</head>
<body>
<div class="container">
<div>hello world</div>
<div class="text">hello world</div>
</div>
</body>
<style>
.container {
margin-top: 100px;
margin-left: 100px;
width: 400px;
height: 400px;
border: 1px solid gray;
position: relative;
}
.container div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
background: red;
display: inline-block;
}
.container .text {
transform: scale(2,2);
left: 200px;
top: 50px;
position: absolute;
}
</style>
<script>
</script>
</html>
运行结果：
五、skew() 方法 （倾斜）
这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
语法：
skew(a,b)
选项参数：
a：是一个 <angle>，表示用于沿横坐标扭曲元素的角度。
b：是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate 方法示例</title>
</head>
<body>
<div class="container">
<div class="text">hello world</div>
</div>
</body>
<style>
.container {
margin-top: 100px;
margin-left: 100px;
width: 400px;
height: 400px;
border: 1px solid gray;
}
.container .text {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
background: red;
transform: skew(30deg,20deg);
}
</style>
<script>
</script>
</html>
运行结果：
