前端2D变换
淳于新
2D转换是使元素改变形状、尺寸和位置的一种效果
2D转换包括
translate（位移）rotate（旋转）scale（缩放）skew（倾斜）
translate（位移）
//平移： translate(水平位移， 垂直位移)
//eg:让div水平居中
<!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>
<style>
div {
width: 400px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
transform:translateX(-50%);
top: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
rotate（旋转）
<!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>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
color: greenyellow;
font-size: 160px;
margin: 100px auto;
text-align: center;
line-height: 300px;
transition: transform 3s;
//rotate(45deg)
//deg 角度
//正值顺时针
//负值逆时针
}
div:hover {
transform: rotate(645deg);
}
</style>
</head>
<body>
<div>A</div>
</body>
</html>
scale（缩放）
//缩放： scale(x, y)
//x: 水平缩放比例
//y: 垂直缩放比例
//如果只有一个值： 等比例缩放
<!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>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
color: greenyellow;
font-size: 160px;
margin: 100px auto;
text-align: center;
line-height: 300px;
transition: transform 3s;
}
div:hover {
transform: scale(0.5);
}
</style>
</head>
<body>
<div>A</div>
</body>
</html>
skew（斜切）
//skewX();
//skewY();
<!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>
<style>
div {
width: 200px;
height: 200px;
background: #f99;
color: aqua;
text-align: center;
line-height: 200px;
margin: 100px auto;
}
div:hover {
transform: skewX(30deg);
}
</style>
</head>
<body>
<div>Angel</div>
</body>
</html>
类似资料：