CSS3新特性—transform
阿新 • • 發佈：2018-06-30
str -i lte port htm div 縮放 跟著 mar
1、2D轉換
2D轉換包括四個方面：位移，縮放，旋轉，傾斜
位移【讓元素移動位置】
transform: translate(100px,100px);
備註：
1. 如果只設置一個值，那麽代表在水平方向移動
2. 如果設置兩個值，那麽第一個值代表水平方向，第二個值代表垂直方向
3. 可以設置負數，負數代表相反方向
4. 通過translate移動元素位置的時候，是相對元素自己本身，可以設置百分比。
縮放【放大縮小】：
transform: scale(2,1);
備註：
1. 如果設置的是一個值，那麽代表當前元素的寬度和高度同時放大或縮小對應的倍數。
2. 如果設置兩個值，第一個值代表寬度的放大或縮小，第二值代表高度的放大或縮小。
3. 設置的值不能帶任何單位,不能設置負數。
4. 設置大於0 小於1的值，代表縮小。
5. 給父元素設置縮放的時候不會影響子元素。
註意： 1. transform屬於復合屬性。如果設置多個值的時候，要使用復合寫法： transform: translate(length, length) rotate() scale(0, 0) skew(angle, angle); 2. 默認元素在旋轉或者傾斜的時候，是按照中心點進行旋轉的。
如果希望改變旋轉點（旋轉軸），通過transform-origin 設置即可。
取值可以是具體的方位名稱： left | right | bottom | top
或者可以設置具體值: transform-origin: right bottom; transform-origin: right 200px;
2、2D轉化案例
鼠標懸浮在盒子上，盒子向右移動：<!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: 100px; height: 100px; background-color: red;
// 過渡屬性 transition: transform 1s linear; }
div:hover { // 設置向正方向移動400px transform: translate(400px,0); } </style> </head> <body> <div></div> </body> </html>
3、3D轉換
位移
1. transfrom: translateX(值); 正數代表向右移動，負數代表向左移動
2. transform:translateY(值); 正數代表向下移動，負數代表向上移動
3. transform:transalteZ(值)； 正數代表朝向我們自己移動，負數代表背向移動
備註：
1. 3D位移也是相當元素自己。
2. 3D位移也可以設置百分比
旋轉
1. transform: rotateX(值deg)；
2. transform: rotateY(值deg);
3. transform: rotateZ(值deg);
遵循左手法則，坐標軸也跟著旋轉
縮放
1. transform: scaleX(2)
2. transform: scaleY(2)
透視：
1. 要給父元素設置perspective;
2. perspective的取值可以影響我們視覺上的效果差。【600-1000推薦設置的值】
轉換為立體效果：
transform-style: preserve-3d;
4、3D轉換案例
倆個盒子重疊在一起，鼠標懸浮在上面，一個盒子旋轉45°。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; margin: 100px auto; position: relative; transform-style: preserve-3d; } .box > div{ width: 100%; height: 100%; position: absolute; } .box .front{ background: red; } .box .back{ background: green; /* transform: skew(0,0) rotateX(0deg); */ transition: all 1s linear; } .box .back:hover { transform: skew(45deg,0) rotateX(45deg); } </style> </head> <body> <div class="box"> <div class="front"></div> <div class="back"></div> </div> </body> </html>
CSS3新特性—transform