（聲明：文中部分內容系整理別人的，出處--http://www.w3cplus.com/css3/new-css3-linear-gradient.html）
一、Css3 Gradient
Gradient分爲linear- gradient（漸行漸變）和radial-gradient（徑向漸變）。因爲瀏覽器的支持性不同所以有必要來了解一下現在的幾種主流的瀏覽器內核：Mozilla（-moz-）（Firefox，Flock等瀏覽器）、WebKit(-webkit-)（Safari、Chrome等瀏覽器）、Opera(-o-)（Opera瀏覽器）、Trident(-ms-)（IE瀏覽器），解釋一下“(-中間-)”是對特定瀏覽器的一個濾鏡識別，使用不同的渲染，所以不同的瀏覽器對於相同的代碼可能會出現不同的結果。
線性漸變：
W3C組織將漸變設計收入到CSS3標準中，讓廣大的前端設計師直接受益，可以直接通過CSS3的漸變屬性製作類似漸變圖片的效果。而且漸變屬性慢慢得到了衆多現代瀏覽器的兼容，甚至煩人的IE，在IE10版本也支持了這個屬性。
漸變可以應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變相當於背景圖片，在理論上可在任何使用url() 值的地方採用，比如最常見的background-p_w_picpath、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-p_w_picpath。但直到目前爲止，僅在背景圖片中得到最完美的支持。
最早支持CSS3漸變的是Webkit內核的瀏覽，隨後在Firefox和Opera等瀏覽器都得到支持，但是衆瀏覽器之間沒有得到統一的標準，用法差異很大。不同的渲染引擎實現漸變的語法也不同，各瀏覽器下使用都需要帶上自己的前綴，給前端設計師們帶來極大的不便。不過還好，到寫本章內容的時候，CSS3漸變屬性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等瀏覽器已完全支持W3C的標準語法，但在Webkit內核下的Safari、iOS Safari、Android瀏覽器和Blackberry瀏覽器中還是需要添加瀏覽器的前綴 “-webkit-”。較以前相比，雖然CSS3的漸變屬性在衆瀏覽器中得到較好的支持，但在實際使用的時候也像製作軟件（Photoshop CS6、Firework CS6等）的漸變工具一樣，將漸變分成了幾種：線性漸變，徑向漸變、重複線性漸變和重複徑向漸變。接下來，我們將依次介紹它們.
線性漸變：語法：
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
W3C標準線性漸性語法包括三個主要屬性參數：第一個參數指定了漸變的方向，同時決定了漸變顏色的停止位置。這個參數值可以省略，當省略不寫的時候其取值爲“to bottom”。在決定漸變的方向主要有兩種方法：
<angle>：通過角度來確定漸變的方向。0度表示漸變方向從下向上，90度表示漸變方向從左向右。如果取值爲下值，其角度按順時針方向旋轉。
關鍵詞：通過關鍵詞來確定漸變的方向。比如“to top”、“to right”、“to bottom”和“to left”。這些關鍵詞對應的角度值爲“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，還可以使用“top left”左上角到右下角、“top right”左上角到右下解等。
第二個和第三個參數，表示顏色的起始點和結束點。大家可以在從中插入更多的顏色值。
直接上例子：
.toLeft { background-p_w_picpath:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); background-p_w_picpath:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);}.toRight { background-p_w_picpath:-webkit-linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet); background-p_w_picpath:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);}.toTop { background-p_w_picpath:-webkit-linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet); background-p_w_picpath:linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);}.toBottom { background-p_w_picpath:-webkit-linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet); background-p_w_picpath:linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);}
效果如下圖所示：
還可以這樣：
.toLeft { background-p_w_picpath:-webkit-linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
background-p_w_picpath:linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
}.toRight { background-p_w_picpath:-webkit-linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
background-p_w_picpath: linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);}效果如下圖所示：
徑向漸變：
CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿着一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變複雜的多。
CSS3徑向漸變在Webkit引擎下的語法和線性漸變的語法一樣，分爲兩種，一種是老版本的語法，另外一種是新版本語法：
Webkit引擎下的老版本語法：
-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Webkit引擎新式語法
-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Webkit引擎中的瀏覽器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎徑向語法，Chrome10.0+和Safari5.1+支持Webkit引擎新式徑向漸變。
Gecko引擎的CSS3的徑向漸變語法：
Gecko引擎的CSS3的徑向漸變和Webkit引擎新式語法類似，只是使用的前綴不同而以：
-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Gecko引擎的Firefox瀏覽器中Firefox3.6+版本支持徑向漸變。
Presto引擎的CSS3徑向漸變語法
Presto引擎的CSS3徑向漸變語法和Webkit引擎的新式語法類似，只是使用的前綴不同而以：
-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Presto引擎中的Opear11.6開始支持徑向漸變。
Trident引擎的瀏覽器的徑向漸變語法：
Trident引擎的瀏覽器從IE10開始支持徑向漸變語法，其語法格式與Webkit引擎的新式語法類似，僅不同的是其前綴不同，需要使用“-ms-”：
-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
W3標準：
W3C組織從2013年04月開始給徑向語法推出新的語法規則：
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
不過支持徑向漸變語法的瀏覽器，到寫這文稿時，僅有IE10+,Firefox16+瀏覽器支持。
參數：
CSS3的徑向漸變相對於線性漸變要複雜的多，屬性參數也繁多複雜。CSS3徑向變中新老語法中的屬性參數定義如下：
<position>：主要用來定義徑向漸變的圓心位置。此值類似於CSS中background-position屬性，用於確定元素漸變的中心位置。如果這個參數省略了，其默認值爲“center”。其值主要有以下幾種：
<length>：用長度值指定徑向漸變圓心的橫座標或縱座標。可以爲負值。
<percentage>：用百分比指定徑向漸變圓心的橫座標或縱座標。可以爲負值。
left：設置左邊爲徑向漸變圓心的橫座標值。
center：設置中間爲徑向漸變圓心的橫座標值或縱座標。
right：設置右邊爲徑向漸變圓心的橫座標值。
top：設置頂部爲徑向漸變圓心的縱標值。
bottom：設置底部爲徑向漸變圓心的縱標值。
<shape>：主要用來定義徑向漸變的形狀。其主要包括兩個值“circle”和“ellipse”：
circle：如果<size>和<length>大小相等，那麼徑向漸變是一個圓形，也就是用來指定圓形的徑向漸變
ellipse：如果<size>和<length>大小不相等，那麼徑向漸變是一個橢圓形，也就是用來指定橢圓形的徑向漸變。
<size>：主要用來確定徑向漸變的結束形狀大小。如果省略了，其默認值爲“farthest-corner”。可以給其顯式的設置一些關鍵詞，主要有：
closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角；
如果<shape>設置了爲“circle”或者省略，<size>可能顯式設置爲<length>。表示的是用長度值指定徑向漸變的橫向或縱向直徑長度，並根據橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓。此值不不能負值。
如果<shape>設置了“ellipse”或者省略，<size>可能顯式設置爲［<length>|<percentage>］。主要用來設置橢圓的大小。第一個值代表橢圓的水平半徑，第二個值代表垂直半徑。這兩個值除了使用<length>定義大小之外還可以使用<percentage>來定義這兩半徑大小。使用<percentage>定義值是相對於徑向漸變容器的尺寸。同樣不能爲負值。
<color-stop>：徑向漸變線上的停止顏色，類似於線性漸變的<color-stop>。徑向漸變的爲漸變線從中心點向右擴散。其中0%表示漸變線的起始點，100%表示漸變線的與漸變容器相交結束的位置。而且其顏色停止可以定義一個負值。
上例子：
用不同的漸變參數製作徑向漸變效果，通過製作同心圓，主要半徑和次要半徑來決定徑向漸變的形狀。例如，圓心位置都在“200px,150px”處，主要半徑爲50px，次要半徑爲150px，從“hsla(120,70%,60%,.9)”色到“hsla(360,60%,60%,.9)”色徑向漸變：
div { width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid hsla(60,50%,80%,.8);
background-p_w_picpath: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-p_w_picpath: radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));} 效果如下圖所示：
上圖實現的是內徑小於外徑製作的徑向漸變效果，接着我們來看看圓心相同，內外半徑大小相同實現的漸變效果：
div { width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid hsla(60,50%,80%,.8);
background-p_w_picpath: -webkit-radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-p_w_picpath: radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));} 效果如下圖所示：
*{
margin: 0;
padding: 0;
}
div {
margin: 20px auto;
width: 300px;
height: 200px;
}
.circle {
background-p_w_picpath: -wekbit-radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
background-p_w_picpath: radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
}
.ellipse {
background-p_w_picpath: -wekbit-radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
background-p_w_picpath: radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
}效果如下圖所示：
二、Gradient
CSS3的變形（transform）屬性讓元素在一個座標系統中變形。這個屬性包含一系列變形函數，可以移動、旋轉和縮放元素。transform屬性的基本語法如下：
transfrom: none | <transform-function> [<transform-function>]*
transform屬性可用於內聯元素和塊元素。其默認值爲none，表示不元素不進行變形。transform另一個屬性值是一系列的<transform-function>。<transform-function>表示一個或多個變形函數，以空格分開；換句話說就是我們同時對一個元素進行變形的多種屬性操作，例如rotate、scale、translate等。但這裏需要提醒大家，以往我們疊加效果都是用逗號(“，”)隔開，但在transform中使用多個transform-function時卻需要有空格隔開。
transform屬性3D變形（3D transform）模塊的一部分，也就是說所有的2D變形函數也包含於3D變形規範中。如此一來，CSS3變形中的函數根據不同的規範略有不同，下面列出的是變形中的2D和3D常用變形函數的功能，簡單說明如下：
2D transform常用的transform-function的功能:
translate()：用來移動元素，可以根據X軸和Ｙ軸座標重新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。scale()：用來縮小或放大元素，可以使用元素尺寸發生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。rotate()：用來旋轉元素。skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。matrix()：定義矩陣變形，基於X軸和Y軸座標重新定位元素位置。
3D transform常用的transform-function的功能:
translate3d()：移元素元素，用來指定一個3D變形移動位移量translate()：指定3Ｄ位移在Ｚ軸的位移量。scale3d()：用來縮放一個元素。scaleZ():指定Z軸的縮放向量。rotate3d()：指定元素具有一個三維旋轉的角度。rotateX()、rotateY()和rotateZ()：讓元素具有一個旋轉角度。perspective()：指定一個透視投影矩陣。matrix3d()：定義矩陣變形。
transform-origin:
transform-origin取值與background-position取值類似。爲了方便記憶，可以把關鍵詞和百分比值對比起來記：
top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
下面就看一個例子，深切的理解下面幾個屬性：（scale，skew，rotate）
<div> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /></div><div> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="142" height="200" /></div>
.div { width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(p_w_picpaths/bg-grid.jpg) no-repeat center center;
background-size: 100% 100%;}div img { position: absolute;
top: 50%;
left: 50%;
margin-left: -71px;
margin-top: -100px; }.div img:nth-child(1){ opacity: .5;
z-index: 1;
transform: rotate(10deg);}div img:nth-child(2){ opacity: .6;
z-index: 2;
transform: rotate(25deg);}div img:nth-child(3){ opacity: .7;
z-index: 3;
transform: rotate(35deg);}div img:nth-child(4){ opacity: .8;
z-index: 4;
transform: rotate(45deg);}div img:nth-child(5){ z-index: 5;
transform: rotate(60deg);}div:nth-of-type(2) img { transform-origin: bottom;}
div img:nth-child(1){ opacity: .5;
z-index: 1;
transform: skewX(10deg);}
div img:nth-child(2){ opacity: .6;
z-index: 2;
transform: skewX(15deg);}div img:nth-child(3){ opacity: .7;
z-index: 3;
transform: skewX(20deg);}div img:nth-child(4){ opacity: .8;
z-index: 4;
transform: skewX(25deg);}div img:nth-child(5){ z-index: 5;
transform: skewX(30deg);}div:nth-of-type(2) img { transform-origin: bottom;}
div img:nth-child(1){ opacity: .5;
z-index: 1;
transform: scale(1.2);}div img:nth-child(2){ opacity: .6;
z-index: 2;
transform: scale(1.1);}div img:nth-child(3){ opacity: .7;
z-index: 3;
transform: scale(.9);}div img:nth-child(4){ opacity: .8;
z-index: 4;
transform: scale(.8);}div img:nth-child(5){ z-index: 5;
transform: scale(.6);}div:nth-of-type(2) img { transform-origin: right;}
在scale()函數中，取值除了可以取正值之外，同時還可以取負值。只不過取負值時，會先讓元素進行翻轉，然後在進行縮放。
div img { position: absolute;
top: 50%;
left: 50%;
margin-left: -71px;
margin-top: -100px;
backface-visibility: visible;
transform: perspective(500px);}div img:nth-child(1){ opacity: .5;
z-index: 1;
transform: rotate3d(1, 1, 1,10deg);}div img:nth-child(2){ opacity: .6;
z-index: 2;
transform: rotate3d(1, 1, 1,25deg);}div img:nth-child(3){ opacity: .7;
z-index: 3;
transform: rotate3d(1, 1, 1,35deg);}div img:nth-child(4){ opacity: .8;
z-index: 4;
transform: rotate3d(1, 1, 1,45deg);}div img:nth-child(5){ z-index: 5;
transform: rotate3d(1, 1, 1,60deg);}div:nth-of-type(2) img { transform-origin: left bottom -50px;} 
下面來講一下位移函數（translate）：
translate是一種方法，將元素向指定的方向移動，類似於position中的relative。可以簡單的理解爲，使用translate()函數，你可以把元素從原來的位置移動，而不影響在X、Y軸上任何組件。
translate()函數的使用語法如下：
translate(tx),或者translate(tx,ty)
tx是一個代表X軸（橫座標）移動的向量長度，當其值爲正值時，元素向X軸右方向移動，反之其值爲負值時，元素向X軸左方向移動。
ty是一個代表Y軸（縱向標）移動的向量長度，當其值爲正值時，元素向Y軸下方向移動，反之其值爲負值時，元素向Y軸上方向移動。如果ty沒有顯式設置時，相當於ty=0。
結合起來，translate()函數移動元素主要有以下三種移動：
水平移動：向右移動
translate(tx,0)和向左移動translate(-tx,0)；垂直移動：向上移動
translate(0,-ty)和向下移動translate(0,ty);對角移動：右下角移動
translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。
<div> <img src="p_w_picpaths/cardKingClub.png" alt="" width="70" height="100" /> <img src="p_w_picpaths/cardKingClub.png" alt="" width="70" height="100" /></div>
div {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(p_w_picpaths/bg-grid.jpg) no-repeat center center;
background-size: 100% 100%;}
//默認圖片都在容器中水平垂直居中
div img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -35px;
margin-top: -50px;
}
div img:nth-child(1){
opacity: .5;
z-index: 1;
}
div img:nth-child(2){
opacity: 1;
z-index: 2;
transform: translate(100px,0);
}
效果如下圖所示：
上面講的是2d，下面講一下3d：
在講3d之前，先了解一下一個屬性：perspective
（轉載：http://www.alixixi.com/web/a/2013011686696.shtml）
CCS3中的Transform是設置界面樣式和動畫的一大利器。而且在Chrome和FF中還支持3D變換。IE9不支持，IE10支持。
只要是3D場景都會涉及視角問題和透視的問題。在Transform中的設置方法比較簡單：
只能選擇透視方式，也就是近大遠小的顯示方式。
鏡頭方向只能是平行Z軸向屏幕內，也就是從屏幕正前方向裏看。
可以調整鏡頭與平面位置：
a) perspective屬性設置鏡頭到元素平面的距離。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，鏡頭距離元素表面的位置是300像素。
b) perspective-origin屬性規定了鏡頭在平面上的位置。默認是放在元素的中心。
下面用一個正方體（或者說骰子）向大家演示視角不同視角（perspective 以及 ）的差別。
鏡頭距離z=0平面的不同距離的效果。
![]()
鏡頭在z座標固定時，x和y座標（perspective-origin）變化時的差別。
![]()
使用CSS3進行3D變換很簡單。
例如：讓一個Div沿Y軸旋轉一個角度：
上面的原始的Div和圖片，下面是旋轉後的效果。
<div id="animateTest" > <img src=http://www.webjx.com/css/"http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div> <div id="animateTest" style="-webkit-transform: rotateY(40deg);"> <img src=http://www.webjx.com/css/"http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div>
第一張圖是原始狀態的DIV，第二張圖是旋轉後的效果。
![]()
是不是效果不明顯？這是因爲鏡頭離平面太遠了，所以旋轉效果不明顯。現在我們試試perspective屬性。我們設置perspect=400px。
<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> <img src=http://www.webjx.com/css/"http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div>
![]()
怎麼樣現在效果明顯了吧。這就是perspective的用途。
不過在chrome中發現一個問題，那就是perspective一定要在rotateY（或rotateX）的前面。如果代碼寫成下面的情況，perspective的設置會無效。
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);">
在FireFox中也是這種情況。
在mozilla的文檔上也沒有說明這個情況。現在還不確定是設計如此還是Bug。總之大家用的時候就將prespective放在前面好了。
在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。這種變形的特點是，使用三維向量的座標定義元素在每個方向移動多少。其基本語法如下：
translate3d(tx,ty,tz)
其屬性值取值說明如下：
tx：代表橫向座標位移向量的長度；
ty：代表縱向座標位移向量的長度；
tz：代表Z軸位移向量的長度。此值不能是一個百分比值，如果取值爲百分比值，將會認爲無效值。
現在看一個實例：
<div class="stage s1"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div></div><div class="stage s2"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div></div>
.stage { width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;}.container { position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}.container img { position: absolute;
margin-left: -35px;
margin-top: -50px; }.container img:nth-child(1){ z-index: 1;
opacity: .6;}.s1 img:nth-child(2){ z-index: 2;
-webkit-transform: translate3d(30px,30px,200px);
-moz-transform: translate3d(30px,30px,200px);
-ms-transform: translate3d(30px,30px,200px);
-o-transform: translate3d(30px,30px,200px);
transform: translate3d(30px,30px,200px);}.s2 img:nth-child(2){ z-index: 2;
-webkit-transform: translate3d(30px,30px,-200px);
-moz-transform: translate3d(30px,30px,-200px);
-ms-transform: translate3d(30px,30px,-200px);
-o-transform: translate3d(30px,30px,-200px);
transform: translate3d(30px,30px,-200px);}效果如下所示：
.s1 img:nth-child(2){ z-index: 2;
opacity: .6;
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-ms-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);}.s2 img:nth-child(2){ z-index: 2;
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);}效果如下：
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時爲1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。通過使用3D縮放函數，可以讓元素在Z軸上按比例縮放。默認值爲１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。其使用語法如下：
scale3d(sx,sy,sz)
其取值說明如下：
sx：橫向縮放比例；
sy：縱向縮放比例；
sz：Z軸縮放比例；
.s1 img:nth-child(2){ z-index: 2;
-webkit-transform: scaleZ(5) rotateX(45deg);
-moz-transform: scaleZ(5) rotateX(45deg);
-ms-transform: scaleZ(5) rotateX(45deg);
-o-transform: scaleZ(5) rotateX(45deg);
transform: scaleZ(5) rotateX(45deg);}.s2 img:nth-child(2){ z-index: 2;
-webkit-transform: scaleZ(.25) rotateX(45deg);
-moz-transform: scaleZ(.25) rotateX(45deg);
-ms-transform: scaleZ(.25) rotateX(45deg);
-o-transform: scaleZ(.25) rotateX(45deg);
transform: scaleZ(.25) rotateX(45deg);}
其效果如下所示：
到目前爲止，我們已經討論瞭如何讓一個元素在平面上進行順時針或逆時針旋轉。在三維變形中，我們可以讓元素在任何軸旋轉。爲此，CSS3新增三個旋轉函數：rotateX()、rotateY()和rotateZ()。
rotate3d(x,y,z,a)
rotate3d()中取值說明：
x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。
下面介紹的三個旋轉函數功能等同：
rotateX(a)函數功能等同於rotate3d(1,0,0,a)
rotateY(a)函數功能等同於rotate3d(0,1,0,a)
rotateZ(a)函數功能等同於rotate3d(0,0,1,a)
實戰：
<div class="stage s1"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> </div></div><div class="stage s2"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> </div></div><div class="stage s3"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> </div></div><div class="stage s4"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" /> </div></div>
.stage { width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;}.container { position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}.container img { position: absolute;
margin-left: -70px;
margin-top: -100px; }.container img:nth-child(1){ z-index: 1;
opacity: .6;}.s1 img:nth-child(2){ z-index: 2;
-webkit-transform:rotateX(45deg);
-moz-transform:rotateX(45deg);
-ms-transform:rotateX(45deg);
-o-transform:rotateX(45deg);
transform:rotateX(45deg);}.s2 img:nth-child(2){ z-index: 2;
-webkit-transform:rotateY(45deg);
-moz-transform:rotateY(45deg);
-ms-transform:rotateY(45deg);
-o-transform:rotateY(45deg);
transform:rotateY(45deg);}.s3 img:nth-child(2){ z-index: 2;
-webkit-transform:rotateZ(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotateZ(45deg);
-o-transform:rotateZ(45deg);
transform:rotateZ(45deg);}.s4 img:nth-child(2){ z-index: 2;
-webkit-transform:rotate3d(.6,1,.6,45deg);
-moz-transform:rotate3d(.6,1,.6,45deg);
-ms-transform:rotate3d(.6,1,.6,45deg);
-o-transform:rotate3d(.6,1,.6,45deg);
transform:rotate3d(.6,1,.6,45deg);}效果如下所示：
下面給大家一個例子，動態的，可以 自己試一下：
<html>
<head>
<style>
@-webkit-keyframes spin{
0%{
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg)
}
100%{
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg)
}
}
@-moz-keyframes spin{
0%{
-moz-transform:rotateY(0deg);
transform:rotateY(0deg)
}
100%{
-moz-transform:rotateY(360deg);
transform:rotateY(360deg)
}
}
@-ms-keyframes spin{
0%{
-ms-transform:rotateY(0deg);
transform:rotateY(0deg)
}
100%{
-ms-transform:rotateY(360deg);
transform:rotateY(360deg)
}
}
@-o-keyframes spin{
0%{
-o-transform:rotateY(0deg);
transform:rotateY(0deg)
}
100%{
-o-transform:rotateY(360deg);
transform:rotateY(360deg)
}
}
@keyframes spin{
0%{transform:rotateY(0deg)}
100%{transform:rotateY(360deg)}
}
.stage {
width: 300px;
height: 300px;
margin: 15px auto;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
-webkit-perspective: 300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
-o-perspective: 300px;
perspective: 300px;
}
.container {
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover{
-moz-animation:spin 5s linear infinite;
-o-animation:spin 5s linear infinite;
-webkit-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;
}
.side {
-webkit-transform-origin: 50% 50%;
background: rgba(142,198,63,0.3);
border: 2px solid #8ec63f;
font-size: 60px;
font-weight: bold;
color: #fff;
height: 196px;
line-height: 196px;
position: absolute;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
text-transform: uppercase;
width: 196px;
}
.front {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}
.back {
-webkit-transform: rotateX(180deg) translateZ(100px);
-moz-transform: rotateX(180deg) translateZ(100px);
-ms-transform: rotateX(180deg) translateZ(100px);
-o-transform: rotateX(180deg) translateZ(100px);
transform: rotateX(180deg) translateZ(100px);
}
.left {
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
-ms-transform: rotateY(-90deg) translateZ(100px);
-o-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.right {
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.top {
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
-o-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side left">3</div>
<div class="side right">4</div>
<div class="side top">5</div>
<div class="side bottom">6</div>
</div>
</div>
</body>
</html>非常有意思，不上圖了，大家一定要試一下！