CSS3转换
2021-06-29 本文已影响0人
微语博客
转换属性
转换（transform）是CSS3新增的属性，转换属性可以对元素进行移动、缩放、转动、拉长或拉伸。CSS3的转换属性包括2d和3d转换。
2D转换
2d转换包括5个常用的转换方法
- translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
- skew()：参数表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- matrix()：2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 转换</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 100px;border: 1px solid black;background-color: lime;}
</style>
</head>
<body>
<div style="transform: translate(100px,50px);">CSS3 translate平移 x=100 y=50</div>
<div style="transform: rotate(45deg);">CSS3 rotate旋转 45deg</div>
<div style="transform: scale(0.8,1.2);">CSS3 scale缩放 x=0.8 y=1.2</div>
<div style="transform: skew(30deg);">CSS3 skew倾斜 x=30deg</div>
<div style="transform: matrix(1.2,0,0,1,50,20);">CSS3 matrix 缩放1.2*1 倾斜0*0 平移50+20</div>
</body>
</html>
matrix( a, b, c, d, e, f ); a 水平缩放，b 水平倾斜，c 垂直倾斜，d 垂直缩放，e 水平移动，f 垂直移动
3D转换
常用3d转换方法：
- rotateX()：围绕其在一个给定度数X轴旋转的元素。
- rotateY()：围绕其在一个给定度数Y轴旋转的元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 转换</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 100px;border: 1px solid black;background-color: lime;}
</style>
</head>
<body>
<div style="transform: rotateX(60deg);">CSS3 rotateX旋转 60deg</div>
<div style="transform: rotateY(45deg);">CSS3 rotateY旋转 45deg</div>
</body>
</html>
3d转换的复合属性translate3d(x,y,z)；scale3d(x,y,z)；matrix3d(a,b,c,d,e,f,
g,h,i,j,k,l,m,n,o,p)。
