Transform-style和Perspective屬性

在《CSS3 Transform——transform-origin》一文中主要介紹了CSS3 Transform屬性中的transform-origin屬性的使用，其實在transform屬性中，transform-origin屬性僅是其中之一，要完全理解transform屬性，這是不夠的，必須的理解其餘屬性的應用。今天將和你們一塊兒探討transform中transform-style和perspective相關屬性的使用。

transform-style屬性

transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d。

transform-style屬性的使用語法很是簡單：

transform-style: flat | preserve-3d 

其中flat值爲默認值，表示全部子元素在2D平面呈現。preserve-3d表示全部子元素在3D空間中呈現。

也就是說，若是對一個元素設置了transform-style的值爲flat，則該元素的全部子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將致使位於正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。若是對一個元素設置了transform-style的值爲preserve-3d，它表示不執行平展操做，他的全部子元素位於3D空間中。

transform-style屬性須要設置在父元素中，而且高於任何嵌套的變形元素。最後，咱們運用一個翻轉的例子，來加深一下對transform-style屬性的印象：

 

HTML模板

<div class="wrap"> <div class="spin"> <div class="rotate"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div> <div class="wrap"> <div class="spin"> <div class="rotate three-d"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div> 

CSS

.wrap { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } /*設置動畫*/ @keyframes spin{ 0%{ transform:rotateY(0deg) } 100%{ transform:rotateY(360deg) } } .spin { width: 142px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -72px; margin-top: -101px; border: 1px dashed orange; cursor: pointer; transform-style: preserve-3d; } /*調用動畫*/ .spin:hover{ animation:spin 5s linear infinite; } .rotate { background: url(images/cardKingClub.png) no-repeat center; background-size: 100% 100%; border: 5px solid hsla(50,50%,50%,.9); transform: perspective(200px) rotateY(45deg); } .rotate img{ border: 1px solid green; transform: rotateX(15deg) translateZ(10px); transform-origin: 0 0 40px; } /*改變transform-style的默認值*/ .three-d { transform-style: preserve-3d; }

特別聲明：爲了節省篇幅，代碼中CSS3屬性代碼省去了各瀏覽器的私有前綴，在實際操做中，須要將各瀏覽器前綴加上，纔會有效果。

其效果以下所示：

正如您所看到的，當元素設置.rotate設置了flat值時，其子元素img不會根據translateZ()值攤開，而在同一平面旋轉，如上圖上部分所示；當元素.rotate設置了preserve-3d值時，其子元素img會根據translateZ()值攤開，再也不會堆疊在一塊兒，如上圖下部分所示。

有一點須要特別提醒你們，若是你的元素設置了transform-style值爲preserve-3d，就不能爲了防止子元素溢出容器而設置overflow值爲hidden，若是設置了overflow:hidden一樣能夠迫死子元素出如今同一平面（和元素設置了transform-style爲flat同樣的效果），以下圖所示：

perspective屬性

perspective屬性對於3D變形來講相當重要。該屬性會設置查看者的位置，並將可視內容映射到一個視錐上，繼而投到一個2D視平面上。若是不指定透視，則Z軸空間中的全部點將平鋪到同一個2D視平面中，而且變換結果中將不存在景深概念。

上面的描述可能讓人難以理解一些，其實對於perspective屬性，咱們能夠簡單的理解爲視距，用來設置用戶和元素3D空間Z平面之間的距離。而其效應由他的值來決定，值越小，用戶與3D空間Z平面距離越近，視覺效果更使人印象深入；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就很小。

在3D變形中，對於某些變形，例以下面的示例演示的沿Z軸的變形，perspective屬性對於查看變形的效果來講必不可少。

咱們先來看一個簡單的實例，製做一個撲克牌3D旋轉效果，而且一個在撲克牌的父元素添加了視距perspective，而另外一個卻沒有設置：

HTML

<div> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> <div> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> 

CSS

div { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/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; transform-origin: bottom; } div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ z-index: 2; transform: rotateX(45deg); } div:nth-of-type(2){ perspective: 500px; }

其效果以下：

上圖的效果徹底說明了一切。父節點沒有設置perspective的狀況下，梅花King的3D旋轉效果不明顯，而在父節點設置perspective後，梅花King纔像個3D旋轉。

上例簡單的演示了perspective的使用方法，咱們回過頭來，看看perspective的使用語法：

perspective：none | <length>

perspective屬性包括兩個屬性：none和具備單位的長度值。其中perspective屬性的默認值爲none，表示無限的角度來看3D物體，但看上去是平的。另外一個值<length>接受一個長度單位大於0的值。並且其單位不能爲百分比值。<length>值越大，角度出現的越遠，從而建立一個至關低的強度和很是小的3D空間變化。反之，此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。

好比你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方，你距離立方體是同樣的尺寸。所以視角轉變遠遠大於站在1000英尺處的，立體尺寸是你距離立方體距離的百分之一。一樣的思惟適用於perspective的<length>值。咱們一塊兒來看一個實例，來增強這方面的理解：

HTML

<div class="wrapper w2"> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </div> <div class="wrapper w1"> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </div> 

CSS

.wrapper { width: 50%; float: left; } .cube { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: rotateX(-40deg) rotateY(32deg); } .side { position: absolute; width: 2em; height: 2em; background: rgba(255, 99, 71, 0.6); border: 1px solid rgba(0, 0, 0, 0.5); color: white; text-align: center; line-height: 2em; } .front { transform: translateZ(1em); } .top { transform: rotateX(90deg) translateZ(1em); } .right { transform: rotateY(90deg) translateZ(1em); } .left { transform: rotateY(-90deg) translateZ(1em); } .bottom { transform: rotateX(-90deg) translateZ(1em); } .back { transform: rotateY(-180deg) translateZ(1em); } .w1 { perspective: 100px; } .w2{ perspective: 1000px; }

效果以下圖所示：

依據上面的介紹，咱們可對perspective取值作一個簡單的結論：

•  perspective取值爲none或不設置，就沒有真3D空間。
•  perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
•  perspective的值無窮大，或值爲0時與取值爲none效果同樣。

爲了更好的理解perspective屬性，咱們頗有必要把他和translateZ的關係結合起來。其實也能夠把perspective的值簡單的理解爲人的眼睛到顯示器的距離，而translate就是3D物體距離源點的距離，下面引用W3C的一張圖來解說perspective和translateZ的關係。

上圖顯示了perspective屬性和translateZ的位置比例。要頂部的圖，Z是半個d，爲了使用原始圓（輪廓）看起來出如今Z軸上（虛線圓），畫布上的實體圓將擴大兩部，如淺藍色的圓。在底部圖中顯示，圓按比例縮小，導致虛線圓出如今畫布後面，而且z的大小是距原始位置三分之一。

在3D變形中，除了perspective屬性能夠激活一個3D空間以外，在3D變形的函數中的perspective()也能夠激活3D空間。他們不一樣的地方是：perspective用在舞臺元素上（變形元素們的共同父元素）；perspective()就是用在當前變形元素上，而且能夠與其餘的transform函數一塊兒使用。例如，咱們能夠把：

.stage { perspective: 600px }

寫成：

.stage .box { transform: perspective(600px); }

來看一個簡單示例：

HTML

<div class="stage"> <div class="container"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> <div class="stage"> <div class="container"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> 

CSS

.stage { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } .container { position: absolute; top: 50%; left: 50%; width: 142px; height: 200px; border: 1px dotted orange; margin-left: -71px; margin-top: -100px; } .container img{ transform: rotateY(45deg); } .stage:nth-child(1) .container{ perspective: 600px; } .stage:nth-child(2) img { transform:perspective(600px) rotateY(45deg); }

效果以下所示：

上圖效果能夠看出，雖然書寫的形式，屬性名稱不一致，可是效果卻同樣。

雖然perspective屬性和perspective()函數所起的功能是同樣的，但其取值以及以運用的對像有所不一樣：

•  perspective屬性能夠取值爲none或長度值；而perspective()函數取值只能大於0，若是取值爲0或比0小的值，將沒法激活3D空間；
•  perspective屬性用於變形對像父元素；而perspective()函數用於變形對像自身，並和transform其餘函數一塊兒使用。

perspective-origin屬性

perspective-origin屬性是3D變形中另外一個重要屬性，主要用來決定perspective屬性的源點角度。它實際上設置了X軸和Y軸位置，在該位置觀看者好像在觀看該元素的子元素。

perspective-origin屬性的使用語法也很簡單：

perspective-origin：[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] 

該屬性的默認值爲「50% 50%」(也就是center)，其也能夠設置爲一個值，也能夠設置爲兩個長度值：

•  第一個長度值指定相對於元素的包含框的X軸上的位置。它能夠是長度值（以受支持的長度單位表示）、百分比或如下三個關鍵詞之一：left（表示在包含框的X軸方向長度的0%），center（表示中間點）,或right（表示長度的100%）。
•  第二個長度值指定相對於元素的包含框的Y軸上的位置。它能夠是長度值、百分比或如下三個關鍵詞之一：top（表示在包含框的Y軸方向長度的0%），center（表示中間點），或bottom（表示長度的100%）。

注意，爲了指轉換子元素變形的深度，perspective-origin屬性必須定義父元素上。一般perspective-origin屬性自己不作任何事情，它必須被定義在設置了perspective屬性的元素上。換句話說，perspective-origin屬性須要與perspective屬性結合起來使用，以便將視點移至元素的中心之外位置，以下圖所示：

每每咱們看同樣東西不可能一直都在中心位置看，想換個角度，換個位置一看究竟，這個時候就離不開perspective-origin這個屬性，下面來自於W3C官網的圖能夠簡單闡述這一觀點：

接下來的示例演示了修改perspective-origin的屬性值對立方體的影響：

特別聲明： 以上示例來自於http://css-tricks.com/almanac/properties/p/perspective-origin/

backface-visibility屬性

backface-visibility屬性決定元素旋轉背面是否可見。對於未旋轉的元素，該元素的正面面向觀看者。當其Y軸旋轉約180度時會致使元素的背面面對觀衆。

backface-visibility屬性使用語法很簡單：

backface-visibility: visible | hidden 

該屬性被設置爲如下兩個關鍵詞之一：

•  visible：爲backface-visibility的默認值，表示反面可見
•  hidden：表示反面不可見

一個元素的可見性與「backface-visibility:hidden」決定以下：

•  元素在3D環境下渲染上下文，將根據3D變形矩陣來計算，反之元素不在3D環境下渲染上下文，將根據2D變形矩陣來計算。
•  若是組件的矩陣在第3行、3列是負值，那麼元素反面是隱藏，反之是可見的。

簡單點來講，backface-visibility屬性可用於隱藏內容的背面。默認狀況下，背面可見，這意味着即便在翻轉後，旋轉的內容仍然可見。但當backface-visibility設置爲hidden時，旋轉後內容將隱藏，由於旋轉後正面將再也不可見。該功能可幫助您模擬多面的對象，例以下例中使用的紙牌。經過將backface-visibility設置爲hidden，您能夠輕鬆確保只有正面可見。

HTML

<div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> <div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> 

CSS

*{ margin: 0; padding: 0; } body { background-color: hsla(173,80%,21%,.9); } .stage{ float: left; border: 1px dotted orange; position: relative; margin: 20px; border-radius: 8px; perspective: 1000; } .container { width: 102px; height: 142px; position: relative; transition: 0.5s; transform-style: preserve-3d; } .card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; } .front { background: url(images/cardjfront.png) no-repeat center/100% 100%; z-index: 2; } .back { background: url(images/cardjback.png) no-repeat center/100% 100%; transform: rotateY(180deg); } .stage:nth-child(1) .container{ transform: rotateY(0deg); } .stage:nth-child(2) .container{ transform: rotateY(30deg); } .stage:nth-child(3) .container{ transform: rotateY(60deg); } .stage:nth-child(4) .container{ transform: rotateY(90deg); } .stage:nth-child(5) .container{ transform: rotateY(120deg); } .stage:nth-child(6) .container{ transform: rotateY(150deg); } .stage:nth-child(7) .container{ transform: rotateY(180deg); }

其效果以下：

在本例中，未旋轉時，您將看到撲克牌正面，也就是紅桃J，這是因爲其定位於頂部。隨着向撲克牌應用的旋轉超過90度，第二個div的backface-visibility:hidden屬性致使其不可見，所以將顯示撲克牌正面。接來來我個能夠將第二個div的backface-visibility設置爲visible：

.card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: visible; }

效果以下：

上面的示例，從視覺上不太好理解，咱們經過兩個3D立方體來作一個實例，讓你能從視覺上更能直能的區分backface-visibility取值爲hidden和visible的區別：

HTML

<div class="container"> <h1>backface-visibility:visible</h1> <div class="cube backface-visibility-visible"> <div class="side front">1</div> <div class="side back">2</div> <div class="side right">3</div> <div class="side left">4</div> <div class="side top">5</div> <div class="side bottom">6</div> </div> </div> <div class="container"> <h1>backface-visibility:hidden</h1> <div class="cube backface-visibility-hidden"> <div class="side front">1</div> <div class="side back">2</div> <div class="side right">3</div> <div class="side left">4</div> <div class="side top">5</div> <div class="side bottom">6</div> </div> </div> 

CSS

.container { width: 500px; height: 300px; float: left; position: relative; margin: 30px; border: 1px solid #CCC; perspective: 1200px; } .cube { width: 100%; height: 100%; position: absolute; animation: spinCube 8s infinite ease-in-out; transform-style: preserve-3d; transform: translateZ( -100px ); } @keyframes spinCube { 0% { transform: translateZ( -100px ) rotateX( 0deg ) rotateY( 0deg ); } 100% { transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); } } .side { display: block; position: absolute; width: 196px; height: 196px; border: 2px solid black; line-height: 196px; font-size: 120px; font-weight: bold; color: white; text-align: center; } .cube.backface-visibility-visible .side { backface-visibility: visible; } .cube.backface-visibility-hidden .side { backface-visibility: hidden; } .cube .front { background: hsla( 0, 100%, 50%, 0.7 ); } .cube .back { background: hsla( 60, 100%, 50%, 0.7 ); } .cube .right { background: hsla( 120, 100%, 50%, 0.7 ); } .cube .left { background: hsla( 180, 100%, 50%, 0.7 ); } .cube .top { background: hsla( 240, 100%, 50%, 0.7 ); } .cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); } .cube .front { transform: translateZ( 100px ); } .cube .back { transform: rotateX( -180deg ) translateZ( 100px ); }.cube .right { transform:rotateY( 90deg ) translateZ( 100px );}.cube .left { transform:rotateY( -90deg ) translateZ( 100px );}.cube .top { transform:rotateX( 90deg ) translateZ( 100px );}.cube .bottom { transform:rotateX( -90deg ) translateZ( 100px );}

效果以下：

上例或許讓您能更清楚的瞭解backface-visibility的visible和hidden的區別，上圖中左邊立方體每一個頁咱們都能看獲得，而右邊的立方體咱們只能看到視力範圍的面。

 

 

出處：http://www.w3cplus.com/css3/transform-basic-property.html