CSS3之2D與3D變換的實(shí)現(xiàn)方法

css3實(shí)現(xiàn)了對(duì)元素實(shí)行2D平面變換，以及視覺(jué)上的3D空間變換，2D變換平時(shí)可能用的較多，3D結(jié)果也能錦上添花；

關(guān)于坐標(biāo)軸

初中數(shù)學(xué)的幾何學(xué)里我們便開(kāi)始接觸坐標(biāo)軸，最基本的是平面直角坐標(biāo)系 XoY ，然后延長(zhǎng)出空間直角坐標(biāo)系 XYZ ，如今我們來(lái)說(shuō)一下css中的坐標(biāo)系；

css甚至一下設(shè)備相干的開(kāi)發(fā)中，基本都遵循如許一套坐標(biāo)系：以手機(jī)屏幕為例，坐標(biāo)系 圓點(diǎn) 位于屏幕最左上角； x軸 水平，向右為正方向； y軸 垂直，向下為正方向； z軸 垂直于整個(gè)屏幕平面，向外為正方向，就是屏幕光線射向你眼睛的方向；

如圖：

2D變換

包括平移 translate() ，旋轉(zhuǎn) rotate() ，縮放 scale() ，傾斜 skew() ，矩陣 matrix() ；

translate(x,y)

平移操作，包括 translateX(x) , translateY(y) ，括號(hào)內(nèi)填平移參數(shù)值，可以是負(fù)值，即反方向；

例如：

div {
    /*元素向右平移50px，向下移60px*/
    transform: translateX(50px);
    transform: translateY(60px);
}
/*簡(jiǎn)寫情勢(shì)，結(jié)果雷同*/
div {
    transform: translate(50px, 60px);
}

細(xì)致 translate() 只指定一個(gè)值則默認(rèn)是 x軸 位移，即水平移動(dòng)；

rotate(deg)

元素旋轉(zhuǎn)，括號(hào)中參數(shù)為旋轉(zhuǎn)角度， 順時(shí)針 為正值， 逆時(shí)針 為負(fù)值，單位為 deg ，即多少度；

例如：

div {
    /* 順時(shí)針旋轉(zhuǎn)30° */
    transform: rotate(30deg);
}

scale(x,y)

縮放元素，參數(shù)分別為x軸，y軸縮放倍數(shù)，包括 scaleX(x) 和 scaleY(y) ，提供一個(gè)參數(shù)透露表現(xiàn) 按比例 縮放；

例如：

div {
    /* 橫向縮小一半，縱向放大一倍 */
    transform: scale(.5, 2);
}

div {
    /* 按比例放大3倍 */
    transform: scale(3);
}

skew(xdeg,ydeg)

包含 skewX(deg) , skewY(deg) ，透露表現(xiàn)在水平和垂直方向傾斜的角度；

例如：

div {
    transform: skewX(30deg);
    transform: skewY(45deg);
}
/* 簡(jiǎn)寫 */
div {
    transform: skew(30deg, 45deg);
}

必要 細(xì)致 ，假如元素為一個(gè)矩形，那么 skewX(30deg) 透露表現(xiàn)矩形 頂邊固定 ，底邊 向右 傾斜 30deg ； skewY(30deg) 透露表現(xiàn)矩形 左邊框固定 ，右邊框 向下 傾斜 30deg ；

可以根據(jù)上面講的屏幕坐標(biāo)系來(lái)記憶，x軸位于屏幕頂部，方向向右；y軸位于屏幕左部，方向向下；

假如 skew() 只指定一個(gè)值，默認(rèn)是 水平傾斜 ；

skewX(30deg)的結(jié)果：

skewY(30deg)的結(jié)果：

matrix(a,b,c,d,e)

這是一個(gè)綜合屬性，之前的平移，縮放，旋轉(zhuǎn)，傾斜都能通過(guò)這個(gè)矩陣函數(shù)實(shí)現(xiàn)，對(duì)，大學(xué)里 線性代數(shù) 中的矩陣 T_T；

其實(shí)這個(gè)函數(shù)就是前面四種操作的 原理 ，函數(shù)共有六個(gè)參數(shù)，四種操作都對(duì)應(yīng)不同的參數(shù)改變體例，像我們這種非數(shù)學(xué)專業(yè)的就不贅述原理了，前面的操作基本夠用了(想探求刺激就去百度“css matrix”吧)~~;

3D變換

所謂3D就是在前面2D平面上多了一個(gè) z軸 ，方法名也差不多，然后能以分別以三根軸位基準(zhǔn)進(jìn)行變換，實(shí)現(xiàn)立體結(jié)果；

看一下所有3D操作方法：

translate3d(x,y,z)

結(jié)合前面講的空間坐標(biāo)系和 x, y, z軸的位置，三個(gè)參數(shù)分別對(duì)應(yīng)元素在三個(gè)坐標(biāo)軸方向的平移值，也包含三個(gè)方法 translateX(x) , translateY(y) , translateZ(z) ；

舉例：

div {
    transform: translateX(50px);
    transform: translateY(60px);
    transform: translateZ(70px);
}
/* 簡(jiǎn)寫 */
div {
    transform: translate3d(50px, 60px, 70px);
}

細(xì)致：關(guān)于設(shè)置 translateZ(z) 看不出結(jié)果的題目，后面說(shuō)到設(shè)置 persoective 時(shí)會(huì)詮釋；

rotate3d(x,y,z,deg)

參數(shù) x, y, z 為空間坐標(biāo)系的一個(gè)坐標(biāo)位置，然后由原點(diǎn) (0, 0, 0) 指向這個(gè)點(diǎn)形成一個(gè)有方向的新軸，數(shù)學(xué)中稱矢量，最后一個(gè)參數(shù)就是元素圍繞剛才所形成的新軸旋轉(zhuǎn)的度數(shù)；

也包括 rotateX(deg) , rotateY(deg) , rotateZ(deg) ，之前2D的 rotate() 便是這里的 rotateZ() ；

至于旋轉(zhuǎn)的方向，判斷方法類似于物理中的 左手定則 ：角度指定為正的話，左手拇指與四指垂直，拇指指向元素圍繞旋轉(zhuǎn)的坐標(biāo)軸或自定義軸，四指彎曲圍繞方向就是旋轉(zhuǎn)方向；

舉例：

div {
    transform: rotateX(30deg);
    transform: rotateY(30deg);
    transform: rotataZ(30deg);
}
/* 自定義軸旋轉(zhuǎn) */
div {
    transform: rotate3d(10, 10, 10, 30deg);
}

rotateX(30deg)的結(jié)果：

rotateY(30deg)的結(jié)果：

關(guān)于為什么這里的旋轉(zhuǎn)不是想象中的結(jié)果，而是縮小，重要是沒(méi)有設(shè)置視點(diǎn)，后面會(huì)講；

scale3d(x,y,z)

元素關(guān)于三個(gè)軸的縮放比例，包括 scaleX(x) , scaleY(y) , scaleZ(z) ，舉例：

div {
    transform: scaleX(2);
    transform: scaleY(2);
    transform: scaleZ(2);
}
/* 簡(jiǎn)寫 */
div {
    transform: scale3d(2, 2, 2);
}

必要 細(xì)致 這里的 scaleZ() ，正常情況下，擴(kuò)大z軸會(huì)是物體 變厚 ，但是css里面呈現(xiàn)的平面元素并沒(méi)有 厚度 ，所以這里的縮放z軸其實(shí)是縮放元素在z軸的 坐標(biāo) ，所以要有用果必須要指定 translateZ() 的值；

舉例：

body {
    perspective: 500;
}
div {
    /* 必須這個(gè)順序，先縮放后平移，不然無(wú)結(jié)果 */
    transform: scaleZ(2) translateZ(100px);
}

按照上面樣式才能看到 scaleZ(2) 的結(jié)果，由于后面在z軸上移動(dòng)了 100px ，縮放比例為2，最終會(huì)移動(dòng) 200px ，屏幕上則體現(xiàn)為元素放大了一下，這是透視結(jié)果，就是那個(gè) perspective 值，下面會(huì)講到；

matrix3d()

和前面2D的 matrix() 相似，只不過(guò)這里括號(hào)里的參數(shù)有 16個(gè) ，矩陣更加復(fù)雜，跳過(guò)吧﹋o﹋，有愛(ài)好可以自行百度~~；

perspective

在上面的示例中，有關(guān)z軸的平移和縮放通常情況下是看不出結(jié)果的，正是缺少這項(xiàng)屬性值，叫做 透視 ，美術(shù)或設(shè)計(jì)中會(huì)出現(xiàn)這個(gè)詞匯，就是實(shí)現(xiàn)物體近大遠(yuǎn)小的結(jié)果，遠(yuǎn)小最終會(huì)小到一個(gè)點(diǎn)，那就是 透視點(diǎn) ， perspective 就是用來(lái)設(shè)置那個(gè)點(diǎn)距離元素有多遠(yuǎn)，一樣平常300~600很表現(xiàn)很好的透視結(jié)果， 值越小元素透視變形越緊張 ；

必要 細(xì)致 的是，這項(xiàng)屬性設(shè)置在應(yīng)用透視結(jié)果元素的 父元素 的樣式中，才能看出結(jié)果，例如：

body {
    perspective: 500;
    /* 考慮欣賞器兼容 */
    -webkit-perspective: 500;
}

也可以設(shè)置在元素自己，格式為：

div {
    transform: perspective(500);
    -webkit-transform: perspective(500);
}

rotateX(45deg)的更真實(shí)的結(jié)果：

rotateY(45deg)的結(jié)果：

perspective-origin

此項(xiàng)設(shè)置透視點(diǎn)的位置，默認(rèn)在元素幾何中間，必要設(shè)置的話，格式如下：

body {
    /* 默認(rèn)中間 */
    perspective-origin: center center;
    /* 左上角 */
    perspective-origin: left top;
    /* 右邊中間 */
    perspective-origin: right center;
    /* 底部中間 */
    perspective-origin: bottom center;
    /* 也可以是長(zhǎng)度 */
    perspective-origin: 30px 40px;
    /*最后記得加 -webkit- 兼容 */
}

perspective-origin: left center的結(jié)果：

perspective-origin: right center的結(jié)果：

backface-visibility

翻譯過(guò)來(lái)叫背面是否可見(jiàn)，可以設(shè)置 visible 和 hidden ，默認(rèn)可見(jiàn)，比如元素正面有筆墨，設(shè)置背面可見(jiàn)，則關(guān)于y軸旋轉(zhuǎn)180°后元素內(nèi)筆墨變成鏡像，否則不會(huì)出現(xiàn)；

backface-visibility: visible的結(jié)果：

backface-visibility: hidden的結(jié)果(有旋轉(zhuǎn)，只是背面不可見(jiàn)，則看不見(jiàn)了)：

其他屬性

transform-origin

設(shè)置2D/3D轉(zhuǎn)變的基準(zhǔn)，可以是長(zhǎng)度值，也可以是 left, right, top, bottom ，例如：

div {
    /* 關(guān)于元素左上角旋轉(zhuǎn) */
    transform-origin: left top;
    transform: rotate(30deg);
}

transform-style

設(shè)置元素如何在3D空間呈現(xiàn)被嵌套的元素，選擇是 flat 和 preserve-3d ，默認(rèn) flat ；

這里這么來(lái)理解，之前我們對(duì)一個(gè)元素實(shí)行變換時(shí)，都是以屏幕所在平面的坐標(biāo)系在變換，但是元素假如存在子元素的話， transform-style 就是用來(lái)確定在哪套坐標(biāo)系上進(jìn)行變換， flat 透露表現(xiàn)任然以屏幕坐標(biāo)系為基準(zhǔn)， preserve-3d 透露表現(xiàn)以 變換后的父元素所在平面的坐標(biāo)系 為基準(zhǔn)；

#parent {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: perspective(500) rotateY(45deg);
    -webkit-transform: perspective(500) rotateY(45deg);
}
#child {
    transform: perspective(500) rotateX(45deg);
    -webkit-transform: perspective(500) rotateX(45deg);
}

flat的結(jié)果：

preserve-3d的結(jié)果：

例如，父元素繞x軸旋轉(zhuǎn)了45度，并且設(shè)置 transform-style: preserve-3d ，而嵌套的子元素只繞y軸旋轉(zhuǎn)45度，那么最終結(jié)果就是子元素繞父元素平面的y軸旋轉(zhuǎn)了45度，看起來(lái)就像先x軸轉(zhuǎn)45度后y軸轉(zhuǎn)45度的結(jié)果；

最后，別忘了為以上所有特征添加欣賞器兼容前綴；

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。