css3變換與過分

CSS3 2D 轉換

---

css3轉換

經過 CSS3 2d轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

---

 

 瀏覽器支持

屬性	瀏覽器支持
transfrom	IE10 (IE9須要前綴-ms-)	火狐瀏覽器	歐朋瀏覽器	谷歌瀏覽器 須要前綴 -webkit-。	蘋果瀏覽器 須要前綴 -webkit-。

 

---

2D Transform 方法

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

---

 matrix 2D轉換:使用六個值的矩陣

給6個值，能夠讓一個圖形進行變換

 

 

 

                                

           

.test{ transform: matrix(0,0.8,0.3,1,0.6,0); 
}

 translate 2D轉換:沿着 X 和 Y 軸移動元素。

translate能夠讓元素進行X與Y軸的移動

X軸正爲→，負爲←，Y軸正爲↓，負爲↑

咱們也能夠使用translateY與translateX進行單獨的X軸與Y軸的移動

 w

.test{ transform: translate(40px,0);
}

scale 2D轉換:沿着X軸與Y軸縮放轉換

 scale能夠讓元素進行X軸與Y軸的縮放

咱們也能夠使用scaleY與scaleX進行單獨的X軸與Y軸的縮放

 

 

   

.test{ transform: scale(1.2,1.6);
}

 

rotate 2D轉換:進行旋轉

 rotate能夠讓元素進行旋轉，須要一個角度

 

 

 

.test{ transform:rotate(30deg);
}

 skew 2d轉換:傾斜轉換

 skew能夠讓元素進行傾斜

咱們也能夠使用skewY與skewX進行單獨的X軸與Y軸的縮放

 

 

 

.test{ transform: skew(10deg,30deg);
}

 

 

CSS3 3D 轉換

---

 

css3 3D轉換

CSS3 容許您使用 3D 轉換來對元素進行格式化。

---

 

 

 瀏覽器支持

屬性	瀏覽器支持
transfrom	IE10 (IE9須要前綴-ms-)	火狐瀏覽器	歐朋瀏覽器  不支持	谷歌瀏覽器 須要前綴 -webkit-。	蘋果瀏覽器 須要前綴 -webkit-。

 

---

轉換屬性

下面的表格列出了全部的轉換屬性：

屬性	描述
transform	向元素應用 2D 或 3D 轉換。
transform-origin	容許你改變被轉換元素的位置。
transform-style	規定被嵌套元素如何在 3D 空間中顯示。
perspective	規定 3D 元素的透視效果。
perspective-origin	規定 3D 元素的底部位置。
backface-visibility	定義元素在不面對屏幕時是否可見。

---

3D 轉換方法

函數	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	定義 3D 轉化。
translateX(x)	定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	定義 3D 縮放轉換，經過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，經過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，經過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	定義 3D 轉換元素的透視視圖。

 translateX:X軸的3D旋轉

X軸3D旋轉360度

 

 

 

.test{ transform:rotateX(360deg);
}

 

 

translateY:Y軸的3D旋轉

Y軸3D旋轉360度

 

     

.test{ transform:rotateY(360deg);
}

 

 

translateZ:Z軸的3D旋轉

Z軸3D旋轉360度

 

       

.test{ transform:rotateZ(360deg);
}

 

 

 

CSS3 過渡

---

css3 過渡

經過 CSS3，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

---

 

 瀏覽器支持

屬性	瀏覽器支持
transfrom	IE10 (IE9須要前綴-ms-)	火狐瀏覽器	歐朋瀏覽器	谷歌瀏覽器 Chrome 25 以及更早的版本，須要前綴 -webkit-。	蘋果瀏覽器 須要前綴 -webkit-。

 

---

過渡是什麼？

CSS3 過渡是一個從一種元素的樣式逐漸變爲另一種樣式的一種效果

怎麼添加過渡？

要添加過渡，須要寫出須要過渡的效果名和時間，還能夠添加一些控制過渡的特殊東西

若是要添加多個過渡，須要用逗號隔開，並寫出效果名和時間，例如：margin 2s , height 2s;

---

 

過渡屬性

屬性	描述
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。
transition-delay	規定過渡效果什麼時候開始。默認是 0。

---

 

一個簡單過渡的例子

 這裏使用transition作了一個改變寬簡單的過渡

 

 .tblock{ width: 100px; height:100px; background-color: black; transition: width 1s;
    } .transition:hover{ width: 200px;
    }

<div class="block transition"></div>

 過渡和變換都不支持博客園發佈後？？？