CSS3變形的示例分析

這篇文章主要介紹了CSS3變形的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

鹽田網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

CSS3變形

CSS2.1中的頁面都是靜態(tài)的，網(wǎng)頁設(shè)計(jì)師也習(xí)慣把它作為頁面效果的設(shè)計(jì)工具。多年來，Web設(shè)計(jì)師依賴于圖片、Flash或 JavaScript才能完成修改頁面的外觀。 CSS3將改變?cè)O(shè)計(jì)師這種思維，借助CSS3可以輕松傾斜、縮放、移動(dòng)以及翻轉(zhuǎn)元素。

2012年9月，W3C組織發(fā)布了CSS3變形工作草案。允許CSS把元素轉(zhuǎn)變?yōu)?D或3D空間，這個(gè)草案包括了CSS32D變形和CSS33D變形。CSS3變形是一些效果的集合， 比如平移、旋轉(zhuǎn)、縮放和傾斜效果，每個(gè)效果都稱為變形函數(shù)（ Transform Function），它們可以操控元素發(fā)生旋轉(zhuǎn)、縮放、平移等變化。 這些效果在之前都需要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形無須加載這些額外的文件，再一次提升了開發(fā)效率， 提高了頁面的執(zhí)行效率。

CSS3變形屬性及函數(shù)：

CSS3變形允許動(dòng)態(tài)的控制元素，可以在屏幕周圍移動(dòng)它們，縮小或擴(kuò)大、旋轉(zhuǎn)，或結(jié)合所有這些產(chǎn)生復(fù)雜的動(dòng)畫效果。通過CSS變形，可以讓元素生成靜態(tài)視覺效果，也可以很容易結(jié)合CSS3的transition和動(dòng)畫的keyframe產(chǎn)生 一些動(dòng)畫效果：

CSS3變形中具有 X/ Y可用的函數(shù)： translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。 

1，CSS3 2D變形函數(shù)包括： translate()、scale()、rotate()和skew()。translate()函數(shù)接受CSS的標(biāo)準(zhǔn)度量單位； scale()函數(shù)接受 一個(gè)0～1 之間的十進(jìn)制值； rotate() 和 skew() 兩個(gè)函數(shù)都接受 一個(gè)徑向的度量單位值deg。除了rotate()函數(shù)之外，每個(gè)函數(shù)都接受X軸和Y軸的參數(shù)。 2D變形中還有一個(gè)矩陣matrix()函數(shù)， 包括6個(gè)參數(shù)。

2，CSS3 3D變形函數(shù)包括： rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。 3D變形中也包括一個(gè)矩陣matrix3d()函數(shù)， 包括16 個(gè)參數(shù)。

CSS 變形屬性詳解：

transform屬性指一組轉(zhuǎn)換函數(shù)， transform-origin屬性指定元素的中心點(diǎn)在哪， 新增加了第三個(gè)數(shù)transform-origin-z， 控制元素三維空間中心點(diǎn)。 transform-style的值設(shè)置為preserve- 3d， 建立 一個(gè)3D渲染環(huán)境。

：CSS3 2D變形 

在二維或三維空間，元素可以被扭曲、移位或旋轉(zhuǎn)。只不過2D變形工作在X軸和Y軸，也就是大家常說的水平軸和垂直軸；而3D變形工作在X軸和Y軸之外， 還有一個(gè)Z軸，這些3D變換不僅可以定義元素的長(zhǎng)度和寬度，還有深度。首先討論元素在2D平面如何變換，然后在進(jìn)入3D變換的討論。CSS32D變換讓W(xué)eb設(shè)計(jì)師有了更多的自由來裝飾和變形HTML組件，同時(shí)有更多的功能裝飾文本和更多的動(dòng)畫選項(xiàng)來裝飾div元素。2D位移在這里translate是一種方法，將元素向指定的方向移動(dòng)， 類似于position中的relative。可以簡(jiǎn)單理解為，使用translate()函數(shù)可以把元素從原來的位置移動(dòng)，而不影響在 X、 Y 軸上任何組件。http:/ /www.iis7.com/b/wzjk/

translate() 函數(shù)可以取一個(gè)值tx，也可以取兩個(gè)值tx和 ty，

·tx：代表X軸（ 橫坐標(biāo)）移動(dòng)的向量長(zhǎng)度， 當(dāng)其值為正值時(shí)， 元素向X軸右方向移動(dòng)， 反之其值為負(fù)值時(shí)， 元素向X軸左方向移動(dòng)。 

·ty：代表Y軸（ 縱坐標(biāo)） 移動(dòng)的向量長(zhǎng)度，當(dāng)其值為正值時(shí)， 元素向Y軸下方向移動(dòng)， 反之其值為負(fù)值時(shí)， 元素向Y軸上方向移動(dòng)。 如果ty沒有顯式設(shè)置時(shí)， 相當(dāng)于ty=0。 

結(jié)合起來， translate()函數(shù)移動(dòng)元素主要有以下三種移動(dòng)。

-水平移動(dòng)： 向右移動(dòng) translate( tx, 0) 和向左移動(dòng) translate(- tx, 0)。 

-垂直移動(dòng)：向上移動(dòng) translate( 0,- ty) 和向下移動(dòng) translate( 0, ty)。 

-對(duì)角移動(dòng)：右下角移動(dòng) translate( tx, ty)、右上角移動(dòng)translate( tx,- ty)、 左上角移動(dòng)translate(- tx,- ty) 和左下角移動(dòng)translate(- tx, ty)。

如果要將對(duì)象沿著一個(gè)方向移動(dòng)， 如沿著水平軸或者縱軸移動(dòng)， 可以使用translate( tx, 0) 和translate( 0, ty)來實(shí)現(xiàn)。 其實(shí)在變形中還為單獨(dú)一個(gè)方向移動(dòng)對(duì)象提供了更簡(jiǎn)單的方法。 

·translateX()：水平方向移動(dòng)一個(gè)對(duì)象。通過給定一個(gè)X軸方向的數(shù)值指定對(duì)象沿水平軸方向的位移。簡(jiǎn)單點(diǎn)說，對(duì)象只向X軸進(jìn)行移動(dòng)，如果值為正值， 對(duì)象向右移動(dòng)；如果值為負(fù)值，對(duì)象向左移動(dòng)。 

·translateY()：縱軸方向移動(dòng)一個(gè)對(duì)象。通過給定一個(gè)Y軸方向的數(shù)值指定對(duì)象沿縱軸方向的位移。 簡(jiǎn)單點(diǎn)說，對(duì)象只向Y軸進(jìn)行移動(dòng)，如果值為正值，對(duì)象向下移動(dòng)；如果值為負(fù)值，對(duì)象向上移動(dòng)。這兩個(gè)函數(shù)和前面介紹的translate()函數(shù)不同的是每個(gè)方法只接受一個(gè)值。 

·transform: translate(- 100px, 0) 實(shí)際上 等于 transform: translateX(- 100px)。 

·transform: translate( 0,- 100px) 實(shí)際上 等于 transform: translateY(- 100px)。

2D縮放

縮放函數(shù)scale()讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放， 默認(rèn)值為 1。因此0. 01到 0. 99之間的任何值，使一個(gè)元素縮?。欢魏未笥诨虻扔?1. 01的值， 讓元素顯得更大。

縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，可以接受一個(gè)值，也可以接受兩個(gè)值，只有一個(gè)值時(shí)，其第二個(gè)值默認(rèn)與第一個(gè)值相等。

其取值簡(jiǎn)單說明如下：

·sx：指定橫向坐標(biāo)（ X 軸）方向的縮放向量， 如果值為0. 01 ～ 0. 99之間， 會(huì)讓對(duì)象在X 軸方向縮小， 如果值大于或等于1. 01， 對(duì)象在X 軸方向放大。 

·sy：指定縱向坐標(biāo)（ Y 軸）方向的縮放量， 如果值為 0. 01 ～ 0. 99 之間， 會(huì)讓對(duì)象在Y軸方向縮小， 如果值大于或等于1. 01， 對(duì)象在Y 軸方向放大。

·scaleX()：相當(dāng)于scale( sx, 1)。表示元素只在X軸（ 水平 方向）縮放元素， 默認(rèn)值是1。 

·scaleY()：相當(dāng)于scale( 1, sy)。表示元素只在Y軸（ 縱橫 方向）縮放元素， 默認(rèn)值是1。

2D旋轉(zhuǎn) 

旋轉(zhuǎn)函數(shù)rotate()通過指定的角度參數(shù)對(duì)元素根據(jù)對(duì)象原點(diǎn)指定 一個(gè)2D旋轉(zhuǎn)。主要在二維空間內(nèi)進(jìn)行操作，接受一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。 如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針 旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。

rotate()函數(shù)只接受一個(gè)值a，代表旋轉(zhuǎn)的角度值。其取值可以是正的，也可以是負(fù)的。 

·取值為正值時(shí)，元素默認(rèn)相對(duì)元素中心點(diǎn)順時(shí)針旋轉(zhuǎn)。 

·取值為負(fù)值時(shí)，元素默認(rèn)相對(duì)元素中心點(diǎn)逆時(shí)針旋轉(zhuǎn)。

2D傾斜 

傾斜函數(shù)skew()能夠讓元素傾斜顯示，可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸 按照一定的角度傾斜。與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)， 而不會(huì)改變?cè)氐男螤?。skew() 函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤睢?/p>

·ax：指定元素水平方向（ X 軸 方向）傾斜的角度。 

·ay：指定元素垂直方向（ Y 軸 方向）傾斜的角度。

skew()函數(shù)和CSS3變形中的 translate()、scale()函數(shù)一樣，除了可以使用 skew( tx, ty)函數(shù)讓元素相于元素中心為原點(diǎn)在X軸和Y軸傾斜之外，還可以使用使用 skewX()和skewY()函數(shù)讓元素只在 水平或垂直方向傾斜。 

·skewX()：相當(dāng)于skew( ax, 0) 和 skew( ax)。按給定的角度沿X軸指定一個(gè)傾斜變形。 skewX()使元素以其中心為基點(diǎn)， 并在水平方向（ X 軸）進(jìn)行傾斜變形。 

·skewY()：相當(dāng)于skew( 0, ay)。按給定的角度沿Y軸指定一個(gè)傾斜變形。 skewY()用來設(shè)置元素以其中心為基點(diǎn)并按給定的角度在垂直方向（ Y 軸） 傾斜變形。

在默認(rèn)情況下，skew()函數(shù)都是以元素的原中心點(diǎn)對(duì)元素進(jìn)行傾斜變形，但是同樣可以根據(jù) transform- origin 屬性， 重新設(shè)置元素基點(diǎn)對(duì)元素進(jìn)行傾斜變形。另外，skew()函數(shù)和制圖軟件中的變形 工具所起作用類似，

2D矩陣

CSS3中Transform讓操作變形變得很簡(jiǎn)單，如位移函數(shù)translate() 縮放函數(shù)scale()、旋轉(zhuǎn)函數(shù)rotate() 和傾斜函數(shù)skew()。 這幾個(gè)函數(shù)很簡(jiǎn)單， 也很方便， 但是變形中的矩陣函數(shù)matrix()不常用。當(dāng)然，Web設(shè)計(jì)師可以使用rotate()、skew()、scale()和translate()函數(shù)來滿足它們的變形需要，那為什么要使用矩陣matrix() 呢？ 在CSS3中的變形函數(shù)都可以使用matrix()函數(shù)來代替。

：CSS3 3D變形 

使用二維變形能夠改變?cè)卦谒胶痛怪陛S線，然而還有一個(gè)軸沿著它，可以改變?cè)亍Ｊ褂萌S變形，可以改變?cè)卦赯 軸位置。 三維變換使用基于二維變換的相同屬性，如果熟悉二維變換會(huì)發(fā)現(xiàn)，3D變形的功能和2D變換的功能類似。CSS3中的3D變換主要包括以下幾種功能函數(shù)： 

·3D 位移： 包括translateZ()和translate3d()兩個(gè)功能函數(shù)。 

·3D 旋轉(zhuǎn)： 包括rotateX()、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)。 

·3D 縮放： 包括scaleZ()和scale3d()兩個(gè)功能函數(shù)。 

·3D 矩陣： 和2D變形一樣，也有一個(gè)3D矩陣功能函數(shù)matrix3d()。

CSS3中3D 位移 

主要包括兩種函數(shù) translateZ() 和 translate3d()。 

1. translate3d()函數(shù)的語法translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。這種變形的特點(diǎn)是，使用三維向量的坐標(biāo)定義元素在每個(gè)方向移動(dòng)多少。

translate3d( tx, ty, tz)

其屬性值取值說明如下： 

·tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度； 

·ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度； 

·tz：代表Z軸位移向量的長(zhǎng)度。此值不能是一個(gè)百分比值，如果取值為百分比值，將會(huì)認(rèn)為無效值。

2. translateZ()函數(shù)，功能是讓元素在3D空間沿Z軸進(jìn)行位移，

translate(t)

取值t指的是Z軸的向量位移長(zhǎng)度。使用translateZ()函數(shù)可以讓元素在Z軸進(jìn)行位移，當(dāng)其值為負(fù)值時(shí)，元素在Z軸越移越遠(yuǎn)，導(dǎo)致元素變得較小。反之，當(dāng)其值為正值時(shí)，元素在Z軸越移越近， 導(dǎo)致元素變得較大。

translateZ() 函數(shù)在實(shí)際使用中等同于translate3d( 0, 0, tz)。僅從視覺效果上看， translateZ() 和 translate3d( 0, 0, tz) 函數(shù)功能非常類似于二維空間的 scale() 縮放函數(shù)，但實(shí)際上完全不同。translateZ()和translate3d(0,0,tz)變形是發(fā)生在Z軸上，而不是X軸和Y軸。當(dāng)使用3D變形，能夠在Z軸上移動(dòng)一個(gè)元素確實(shí)有很大的好處， 比如說在創(chuàng)建一個(gè)3D立方體的盒子之時(shí)。

CSS3中3D 縮放

scaleZ() 和 scale3d() 函數(shù)單獨(dú)使用時(shí)沒有任何效果，需要配合其他的變形函數(shù)一起使用才會(huì)有效果。

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)，當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d( 1, 1, sz)，其效果等同于scaleZ( sz)。

1. scaleZ()3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為1，當(dāng)值大于1 時(shí)，元素放大，小于1大于0. 01時(shí)，元素縮小。

scale3d( sx, sy, sz) 

sx： 橫向縮放比例

sy： 縱向縮放比例 

sz： Z軸縮放比例。

CSS3中 3D 旋轉(zhuǎn)

在三維變形中，可以讓元素在任何軸旋轉(zhuǎn)。為此，CSS3新增三個(gè)旋轉(zhuǎn)函數(shù) rotateX()、rotateY() 和rotateZ()。

在 三維空間 里，使用rotateX()、rotateY() 和rotateZ()函數(shù)讓一個(gè)元素圍繞X、 Y、 Z 軸旋轉(zhuǎn)， 其基本語法如下： 

rotateX( a) 

rotateY( a) 

rotateZ( a) 

其中a指的是一個(gè)旋轉(zhuǎn)角度值，其值可以是正值也可以是負(fù)值。如果值為正值，元素順時(shí)針旋轉(zhuǎn)； 反之，值為負(fù)，元素圍繞逆時(shí)針旋轉(zhuǎn)。

rotateZ()函數(shù)指定元素圍繞Z軸旋轉(zhuǎn)，如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時(shí)針或逆時(shí)針旋轉(zhuǎn)，并且效果和rotate()效果等同，但不是在2D平面 旋轉(zhuǎn)。在三維空間里，除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓一個(gè)元素在三維空間中旋轉(zhuǎn)之外，還有一個(gè)屬性函數(shù)rotate3d()。在3D空間，旋轉(zhuǎn)有三個(gè) 角度來描述一個(gè)轉(zhuǎn)動(dòng)軸。 軸的旋轉(zhuǎn)是由一個(gè)[ x, y, z] 向量并經(jīng)過元素原點(diǎn)。 其基本語法如下： 

rotate3d( x, y, z, a) rotate3d() 中取值說明。 

·x： 0 ～ 1 的數(shù)值， 用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值。 

·y： 0 ～ 1 的數(shù)值， 用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值。 

·z： 0 ～ 1 的數(shù)值， 用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值。 

·a： 角度值， 用來指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正值，元素順時(shí)針旋轉(zhuǎn)， 反之元素逆時(shí)針旋轉(zhuǎn)。 當(dāng) x、y、z 三個(gè)值同時(shí)為0時(shí)， 元素在3D空間 不做任何旋轉(zhuǎn)。當(dāng)x、y、z 取不同值時(shí)， 和前面介紹的三個(gè)旋轉(zhuǎn)函數(shù)功能等同。 

·rotateX(a) 函數(shù)功能等同于 rotate3d(1, 0, 0, a)。 

·rotateY(a) 函數(shù)功能等同于 rotate3d(0, 1, 0, a)。 

·rotateZ(a) 函數(shù)功能等同于 rotate3d(0, 0, 1, a)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3變形的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)頁題目：CSS3變形的示例分析
新聞來源：http://bm7419.com/article44/gipgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站設(shè)計(jì)、建站公司、網(wǎng)站排名、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)