transform_2d

在CSS3中,提供了變換這個屬性transform,能夠讓我們更為靈活的操縱html元素,而不需要去考慮布局的問題

transform

主要就是三個方法

• 語法:

/* translate: 移動 第二個參數(shù)不傳默認(rèn)為0 */
/* 建議使用transform來實現(xiàn)元素的變換,不會影響其他的元素*/
transform:translate(x,y);

/* scale: 縮放 傳遞的是比例 比如 2倍,1.5倍,0.5倍等等 */
/* 可能會撐大body的 大小 出現(xiàn)滾動條*/
transform:scale(x,y);

/* rotate: 旋轉(zhuǎn) 傳遞的是角度  360deg等于一圈*/
transform:rotate(angle);

/* skew: 斜方向扭曲 傳遞的是角度 360deg等于一圈 第二個參數(shù)不傳默認(rèn)為0*/
/* 如果兩個軸 扭曲的角度一致 元素會消失*/
transform:skew(xAngle,yAngle);

/* 多個值 通過空格分隔*/
/* 移動 旋轉(zhuǎn) 縮放 */
tranform:translate(10px,10px) rotate(180deg) scale(1.5,1.5);

transform-origin

這個屬性指定的是移動時,以什么原點作為標(biāo)準(zhǔn)

• 語法:

/*x:50px y:中心 作為原點*/
transform-origin:50px;

/*x:50px y:50px 作為原點*/
transform-origin:50px 50px;

/*x:10% y:20% 作為原點*/
transform-origin:10% 20%;

/* 傳入單詞 
可選:top,left,right,center,bottom
*/
/* 左上 作為原點 */
transform-origin:right top;
/* 中心作為原點 */
transform-origin:center center;

transform 賦值先后問題

transform屬性賦值方法

• css語法
  • 當(dāng)我們要為元素添加多個值時,直接通過空格可以進(jìn)行間隔
  • 會先執(zhí)行 第一個 然后依次往后

div:nth-child(1){
    // 先選轉(zhuǎn),然后移動
    transform:roatate(45deg) translate(100px,0):
 
}
div:nth-child(2){
   // 先移動 然后先選轉(zhuǎn)
     transform:translate(100px,0) roatate(45deg) :
}

transform_3d

對應(yīng)的屬性值依舊是transform,只是多了一個Z軸而已,需要一定的空間想象能力

坐標(biāo)軸

• 其中Z軸垂直于屏幕往里
  ![圖片1.png-133.8kB][2]

• 也可以通過左手坐標(biāo)系來查找這幾個軸
  ![圖片2.png-111.1kB][3]

3d旋轉(zhuǎn)

當(dāng)明確了三個坐標(biāo)軸以后,我們就能夠?qū)υ剡M(jìn)行3d方向上的旋轉(zhuǎn)了

• 左手定則

  • 大拇指指向旋轉(zhuǎn)軸的正方向,其余四指彎曲的方向就是旋轉(zhuǎn)的方向

• 語法

/* x方向旋轉(zhuǎn)180°*/
transform:rotateX(180deg)
/* y方向旋轉(zhuǎn)180°*/
transform:rotateY(180deg)
/* z方向旋轉(zhuǎn)180°*/
transform:rotateZ(180deg)

視角

perspective(透視,視角)這個屬性需要一定的空間想象能力,其實就是離我們近的一端看起來大一點

![image_1an3qfb301unh1tuf17271jr6fi611.png-7kB][4]
?

• 語法:

/*直接添加給transform:標(biāo)簽 距離 顯示屏 1000px*/
transform:perspective(1000px)

/*直接使用perspective 屬性賦值:標(biāo)簽 距離 顯示屏 1000px*/
perspective:1000px

• 解釋:
  • 這個屬性的理解 需要配合transformZ()
  • 設(shè)置了perspective屬性假定為1000px
  • 當(dāng)我們使用transformZ()移動1000px時,會發(fā)現(xiàn)標(biāo)簽消失了,也就意味著,移出了 顯示屏 空間想象

• 默認(rèn)Y軸旋轉(zhuǎn)45°
  ![image_1an3r1ad9fqh1s3511m21ge3rqs1r.png-7.5kB][5]

• 透視 Y軸旋轉(zhuǎn)45°
  ![image_1an3r1rtdqs17epmj5an416r79.png-8.7kB][6]

• 使用注意:
  • 雖然可以直接添加給元素本身,但是建議添加到不進(jìn)行變換的父容器中
  • 旋轉(zhuǎn)的是 rotate-box 其內(nèi)部子元素跟他的相對位置沒有改變, 會出現(xiàn) 近大遠(yuǎn)小不改變的問題,這個時候只需要將 perspective提一級即可
  • 視角中心點
    • 當(dāng)只有一個 子元素 并且 子元素 正好在中心的時候 剛好跟 中心點重合

視角方向(perspective-origin)

默認(rèn)我們是直直的看著屏幕,通過該屬性可以修改查看屏幕的角度,需要一定的空間想象能力,可以先不使用

• 默認(rèn)視角
  ![image_1an3r8bpk1rg31rgo7m51bqvnvnm.png-15kB][7]

• 修改之后

![image_1an3rclse8dah178f2kln16jq13.png-21.4kB][8]

變換樣式(transform-style)

在使用3d進(jìn)行頁面元素設(shè)置時,需要配合transform-style才能夠?qū)崿F(xiàn)完美的3d效果

• 默認(rèn)值(旋轉(zhuǎn)中)
  ![image_1an3rj09o1rcq1it1v5a1pm687s1g.png-316.9kB][9]

• 修改為3d
  ![image_1an3rk2il1n2o6is195a14bgcql1t.png-467.9kB][10]

• 使用注意:

  • 該屬性 需要添加到 3d變換的父容器上
  • transform-style: preserve-3d;