transform的常用屬性 總結
transform屬性值：
一、transform: translate();
1、translate()函式可以將元素向指定的方向移動，類似於position中的relative。可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web元件。
2、translate()的括號內包含兩個值，分別為相對於元素原有位置在水平方向和垂直方向的偏移值。
3、向下、向右為正方向
4、如果只想在x軸或者y軸上進行變換，那麼屬性為translateX(n)和translateY(n)
下面這段程式碼就是讓一個盒子平移並對比不會影響其他的盒子能夠真切的顯示出translate()不會影響周圍其他元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{width: 100px;height: 100px;} div:nth-child(1) {background: #00ff00;transform: translate(0, 0);transition: transform 2s linear;} div:nth-child(2){background: #ff0000;} div:nth-child(1):hover {transform: translate(100px, 100px)} </style> </head> <body> <div></div> <div></div> </body> </html>
二、transform:rolate();
1、正值為順時針，負值為逆時針，單位為deg。
2、旋轉中心為元素正中。
三、transform:transform-origin
1、 任何一個元素都有一箇中心點，預設情況之下，其中心點是居於元素X軸和Y軸的50%處。
2、 在沒有transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、縮放，扭曲等操作都是以元素自己中心位置進行變形。
3、 如果實現過渡動畫，則變換中心點應該在元素初始CSS中設定。
4、 transform-origin:x y z;
x
固定值 關鍵字 百分比
y
固定值 關鍵字 百分比
z
固定
下面這段程式碼用過渡動態的讓盒子旋轉了一週，並運用transform-origin()改變旋轉的圓心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background: #0f0;transition:all 3s;margin: 100px auto;transform-origin: 100px 100px;}
div:hover{transform:rotate(360deg) }
</style>
</head>
<body>
<div></div>
</body>
</html>四、transform:scale();
1、scale(x,y) ：x,y 值分別為原有元素寬高的倍數。 1為不縮放，大於1放大，小於1縮小。
2、當為負值時，將會沿x軸或y軸進行翻轉
3、當括號內兩個數相同時，可以只寫一個值代替。如果只想擴大x軸或者y軸，那麼屬性為scaleX(n)和scaleY(n)
4、transform-origin 影響變換方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 100px;height: 50px;transition: all 2s;background: #0f0;margin: 100px auto;}
div:hover{transform:scale(0.5,2)}</style>
</head>
<body>
<div>富強、民主</div>
</body>
</html>五、transform:skew();
1、skew(x-angle,y-angle)方法，該元素會以橫向（X軸）和垂直（Y軸）為參考確定角度;
2、如果只想沿x軸或者y軸進行傾斜，那麼屬性為skewX(n)和skewY(n)
六、transform:matrix();
1、matrix()方法用來把2D變換方法合併成一個。
2、matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。
div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
//x軸縮放，y軸傾斜，x軸傾斜，y軸縮放、x軸平移、y軸平移
}