第一部分: 前言介紹

說先我們來理解一下 transform 這個(gè)單詞:

css-transform.png

從以上結(jié)論,我們把transform的屬性列表一下:

第二部分: 實(shí)例展示與擴(kuò)展

• rotate

transform里rotate能 旋轉(zhuǎn)元素的展示角度
它的值有列表如下:

注: 以上值的 參數(shù)單位都為角度值 deg

下面我們來具體舉例,詳細(xì)了解這個(gè)屬性和作用:
① transform; rotate(number+deg)
對(duì)于平面上的旋轉(zhuǎn), 大家在日常生活中常呈蹬睿看到. 如: 轉(zhuǎn)動(dòng)的風(fēng)車,擺動(dòng)的卡牌...等等.
旋轉(zhuǎn)或是轉(zhuǎn)動(dòng) 就有兩個(gè)基本屬性: 一 是旋轉(zhuǎn)幅度(角度值); 二 是旋轉(zhuǎn)的方向(逆時(shí)針還是順時(shí)針)
我們用實(shí)例來得到答案:

設(shè)計(jì)案例: 給元素四個(gè)邊設(shè)置不同顏色的邊框. 通過 瀏覽器 F12 調(diào)整參數(shù)的不斷變化來觀察旋轉(zhuǎn)的規(guī)律.

.box {
  margin: 100px;
  width:  80px;
  height: 80px;
  background: red;

/* 給邊框設(shè)置不同顏色 */
  border-top: 8px solid green;
  border-right: 8px solid cyan;
  border-bottom: 8px solid orange;
  border-left: 8px solid black;
 
 /* 從臨界點(diǎn)開始變換參數(shù)數(shù)值 */
  transform: rotate(0deg) ; 
  
}

效果:

css-rotate1.gif

從上面gif動(dòng)畫, 可以得出:
參數(shù)為 正值 的時(shí)候, 元素旋轉(zhuǎn)的方向是 順時(shí)針, 當(dāng) 參數(shù)值為 負(fù)值 的時(shí)候, 旋轉(zhuǎn)的方向是 逆時(shí)針.
可以總結(jié)為: 正順負(fù)逆

② transform: roteta3d(x,y,z,angle)
但是了解它之前.我們先把 rotateX(angle),rotateY(angle),rotateZ(angle)給弄清楚..
這里的x,y,z 就是 旋轉(zhuǎn)軸:元素旋轉(zhuǎn)所依據(jù)的基線, 通常在元素幾何上的中心

先看 rotetaX(angle) X為橫軸.它的位置在 元素的中線

.rotateX {
  width: 200px;
  height: 200px;
  background: red;
  margin: 200px;
  text-align: center;
  color: #fff;
  
  transform: rotateX(0deg)   /*  從初始值開始變換 */
}

效果

css-rotateX1.gif

同樣的案例設(shè)計(jì)對(duì)于: transform: rotateY(angle)
效果

css-rotateY1.gif

再來看 : transform: rotateZ(angle)
效果

css-rotateZ1.gif

如果對(duì)于Z軸 指向 還不清楚 可以參看 這張圖..

Z軸示意.webp.jpg

經(jīng)過上面三個(gè)小分支. 現(xiàn)在來正式了解下: tranform: rotate3d(x,y,z,angel)
前面的 x,y,z 相當(dāng)于:

.rotate3d {
  /* 元素圍繞x,y,z軸旋轉(zhuǎn) */
  transform: rotate3d(x,y,z,angle);
  
  /* 元素圍繞X軸旋轉(zhuǎn) */
  transform: rotateX(angle) <==> transform: rotate3d(1,0,0,angle);
  
  /* 元素圍繞Y軸旋轉(zhuǎn) */
  transform: rotateY(angle) <==> transform: rotate3d(0,1,0,angle);
  
  /* 元素圍繞Z軸旋轉(zhuǎn) */
  transform: rotateZ(angle) <==> transform: rotate3d(0,0,1,angle);
}

我們來設(shè)計(jì)一個(gè)案例: 固定x,y,z軸, 讓旋轉(zhuǎn) 角度 不斷變換. 如下:

.rotate3d {
  width: 200px;
  height: 200px;
  background: red url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580726617712&di=c7dc189da8593862cfdd34b0ebeb4740&imgtype=0&src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1410%2F17%2F976a5ae174d3cd67ffffffffc8d65eac.jpeg_r_640x453x70_63758ccb.jpeg) center center no-repeat;
  background-size: 100% 100%;
  margin: 200px;
  color: #fff;
  
  /* 固定常量.控制變量方法 */
  transform: rotate3d(1,1,1,0deg);
}

效果:

css-rotate3d.gif

我們看到圖片的旋轉(zhuǎn),有是 深度 的變化產(chǎn)生. 這就是rotate3d的效果:

• translate

translate定義元素的移動(dòng)變換.
同樣遵循 三維坐標(biāo)系: x,y,z 軸上的移動(dòng)

① transform: translate(x,y): 元素沿x,y的偏移量. 偏移單位是像素px
實(shí)例:

.begin {
  /* margin: 20px; */
  width: 100px;
  height: 100px;
  background: #ddd;
}
.begin::after {
  content: "移動(dòng)后的位置";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background: red;
  
  /* X軸,Y軸各偏移150px */
  transform: translate(150px, 150px);
}

效果:

css-translate.png

transform: translate3d(x,y,z) 單位為px

translate3d 與 rotate3d 一樣.
在多了一個(gè)Z軸后, 就有了深度 的 位移效果了...
實(shí)例:

 <!-- html -->
  <div class="box">
     <div class="translate3d"></div> 
  </div>

/* css */
.box {
   perspective: 500; /* 給父容器一個(gè)透視距離,里面的子元素才會(huì)有透視效果 */
  -webkit-perspective: 500; 
}
.translate3d {
  margin: 100px 0 0 100px;
  width: 200px;
  height: 200px;
  background-image: url(http://up.enterdesk.com/edpic/60/98/d3/6098d30e8e4b5e18a9bb9166c8c50161.jpg);
  background-size: cover;
  
  transform: rotateY(0deg) translate3d(50px,50px,50px);
}

效果:

css-translate3d.gif

• scale

0<n<1: 縮小. n>1 放大 當(dāng)為負(fù)值的時(shí)候.表示反向放大或縮小.

同樣 scale 同樣 分為 平面和三維 兩個(gè)維度.

首先來理解下 平面上的 放大縮小:
tranform: scale(x,y);
具體怎么表現(xiàn)呢? 請(qǐng)看下面案例

.begin {
  margin: 200px;
  width:  200px;
  height: 200px;
  background: red;
}
.begin::after {
  content: "變換后的大小";
  width: 200px;
  height: 200px;
  position: absolute;
  left: 200px;
 
  background: green;
  opacity: .5;
  
  /* X軸方向縮小0.5, Y軸方向放大1.5 */
  transform: scale(.5,1.5)
}

效果:

css-scale.png

再來看 tranform: scale3d(x,y,z)
這里的z同樣是 指向我們觀察者的眼睛的那根 軸..
我們來設(shè)計(jì)一個(gè)實(shí)例 來 感受一下:

 <!-- html -->
  <div class="box">
    <div class="scale3d">scale3d</div>
  </div>

/* css */
.box {
  perspective: 500;
  -webkit-perspective: 500;
  margin: 200px;
}
.box .scale3d {
  width: 200px;
  height: 200px;
  background: red;
  
  /* rotateY(45deg) */
  
  transform: rotateY(45deg) scale3d(1,1,2);
   
}

效果

css-scale3d.gif

為什么改變z的數(shù)值,沒有什么變化呢?!

• skew

transform: skew(angle) 可以 傾斜 元素 x,y軸上的角度

我們先來看第一個(gè): skewX(angle)

.skewX {
  margin: 100px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skewX(10deg);
}

效果

css-skewX.png

得出結(jié)論: 角度正值時(shí),向逆時(shí)針傾斜; 角度為負(fù)值時(shí), 向順時(shí)針傾斜. 元素的幾何中心點(diǎn)不移動(dòng)不變化.

在來看: skewY(angle)

.skewY {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skewY(10deg);
}

效果:

css-skewY.png

再來看, transform: skew(x,y)

.skewXY {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skew(10deg,10deg);
}

效果:

css-skewXY.png

• perspective

定義: 該屬性允許您改變 3D 元素查看 3D 元素的視圖.
用法: transform: perspective(number+px), number 值越小.透視效果越明顯.
注意:

①: perspective 要放在 transform其他屬性的前面.否則不會(huì)產(chǎn)生效果.
② 一般加上-webkit-transform ,兼容性更好.

實(shí)例:

.perspective {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
/* perspective要放在 rotate的前面才會(huì)產(chǎn)生效果 */
  transform: perspective(300px) rotateY(40deg);
  -webkit-transform: perspective(300px) rotateY(40deg);
}

效果:

css-transform-perspective.gif