概要:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
2D 变换方法
方法 | 作用 |
---|---|
translate() | 位移 |
rotate() | 旋转 |
scale() | 缩放 |
skew() | 拉伸 |
matrix() | 矩阵变换 |
2D 变换方法演示
translate()位移:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: #4361ee;
border-radius: 18px;
transform: translate(100px,200px);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
rotate()旋转:
<style>
#box{
width: 100px;
height: 100px;
background-color: #4361ee;
border-radius: 18px;
transform: translate(100px,200px) rotate(45deg);
}
</style>
scale()缩放:
scale(x,y):x和y值为对应坐标轴扩大多少倍,示例中x和y轴均扩大为原来的两倍
<style>
#box{
width: 100px;
height: 100px;
background-color: #4361ee;
border-radius: 18px;
transform: translate(100px,200px) rotate(45deg) scale(2,2);
}
</style>
skew()拉伸:
skewX() ------------X轴斜切
skewY() ------------Y轴斜切
skew(anglex,angley)
<style>
#box{
width: 100px;
height: 100px;
background-color: #4361ee;
border-radius: 18px;
transform:translate(100px,100px) skew(30deg,30deg);
}
</style>
matrix()矩阵:
Matrix 是以上其他方法的底层方法,可以使用matrix达到上边所有效果,但是mtrix使用起来略显麻烦。 Matrix方法有六个参数Matrix(a,b,c,d,e,f) 其实Matrix是经过矩阵变换来进行图形变换的,但是矩阵变换理解太麻烦,反正我是理解不了。。。数学太差劲。。。不过搞明白了Matrix里的参数意义,也行
参数 | 作用 |
---|---|
a | 缩放X轴 |
b | 拉伸Y轴 |
c | 拉伸X轴 |
d | 缩放Y轴 |
e | 位移X轴 |
f | 位移Y轴 |
其中,拉伸是小数数值,是需要计算的,比如,拉伸X 45°,那么,就需要计算tan(45) = 1.61977519054 ,我们要使用的就是1.61977519054 所以这里要注意一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: #4361ee;
border-radius: 18px;
text-align: center;
line-height: 100px;
color: red;
transform:matrix(1,0,0,1,50,100);
}
#box2{
width: 100px;
height: 100px;
background-color: #6930c3;
border-radius: 18px;
text-align: center;
line-height: 100px;
color: red;
transform:matrix(3,0,0,3,300,100);
}
#box3{
width: 100px;
height: 100px;
background-color: #6930c3;
border-radius: 18px;
text-align: center;
line-height: 100px;
color: red;
transform:matrix(1,1.61977519054,0,1,600,100);
}
#box4{
width: 100px;
height: 100px;
background-color: #6930c3;
border-radius: 18px;
text-align: center;
line-height: 100px;
color: red;
transform:matrix(1,0,1.61977519054,1,900,100);
}
#box5{
width: 100px;
height: 100px;
background-color: #6930c3;
border-radius: 18px;
text-align: center;
line-height: 100px;
color: red;
transform:matrix(1,1.61977519054,1.61977519054,1,1200,100);
}
</style>
</head>
<body>
<div id="box">位移</div>
<div id="box2">缩放</div>
<div id="box3">拉伸Y</div>
<div id="box4">拉伸X</div>
<div id="box5">拉伸X,Y</div>
</body>
</html>