CSS3 transform-style
由名稱可以猜測,此屬性可以用於規定transform變換的型別。
通過此屬性可以規定指定元素的子元素的變換效果是位於3D空間,還是被平展於元素的2D空間。
僅從上述概念闡述,讀者可能還是不能完全理解此屬性的作用,不用擔心,後面有詳細程式碼演示。
特別說明:
(1).當前此屬性尚屬實驗性質,但是瀏覽器支援度還是挺不錯的。
(2).標準化後如果有任何改動,本文會第一時間跟進。
關於transform變換更多內容參閱CSS3 2D/3D轉換一章節。
語法結構:
[CSS] 純文字檢視 複製程式碼transform-style: flat|preserve-3d;
引數解析:
(1).flat:規定子元素在變換中,沒有3D效果,也就是隻能被平展於父元素的2D空間內變換。
(2).preserve-3d:預設值,規定子元素在變換中,具有3D效果。
屬性值的解釋過於晦澀,不利於理解,後面會有動態的程式碼演示,基本可以做到一目瞭然。
瀏覽器支援:
(1).IE瀏覽器不支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).Opera瀏覽器支援此屬性。
(5).Safari瀏覽器支援此屬性。
(6).火狐瀏覽器支援此屬性。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ position:relative; height:200px; width:200px; margin-bottom:20px; padding:10px; border:1px solid black; } #father{ padding:50px; position:absolute; border:1px solid black; background-color:red; perspective:500px; transform:rotateY(0deg); transform-style:flat; } #children{ width:100px; height:100px; font-size:12px; text-align:center; line-height:100px; position:absolute; border:1px solid black; background-color:yellow; transform:rotateY(0deg); } table{font-size:12px;width:300px;} .left{text-align:right} </style> <script> function changeFather(value){ let father=document.getElementById('father'); let fatershow=document.getElementById('fatershow'); father.style.transform="rotateY(" + value + "deg)"; fatershow.innerHTML=value + "deg"; } function changeChildren(value){ let children=document.getElementById('children'); let childrenshow=document.getElementById('childrenshow'); children.style.transform="rotateY(" + value + "deg)"; childrenshow.innerHTML=value + "deg"; } window.onload=function(){ let rangef=document.getElementById("rangef"); let rangec=document.getElementById("rangec"); rangef.onmousemove=function(){ changeFather(this.value); } rangec.onmousemove=function(){ changeChildren(this.value); } } </script> </head> <body> <div id="box"> <div id="father"> <div id="children">螞蟻部落</div> </div> </div> <table> <tr> <td class="left">調整紅色:</td> <td><input type="range" step="1" min="-360" max="360" id="rangef" value="0"/></td> </tr> <tr> <td class="left">rotateY:</td> <td>(<span id="fatershow">0deg</span>)</td> </tr> <tr> <td class="left">調整黃色:</td> <td><input type="range" step="1" min="-360" max="360" id="rangec" value="0"/></td> </tr> <tr> <td class="left">rotateY:</td> <td>(<span id="childrenshow">0deg</span>)</td> </tr> </table> </body> </html>
上述程式碼可以通過拖動底部range元素動態演示效果,程式碼執行效果截圖如下:
程式碼演示分析如下:
(1).transform-style屬性設定於父元素之上,對其子元素的變換效果生效。
(2).上述程式碼將屬性值設定為flat,那麼子元素的transform變換將失去3D效果,它只會在父元素x軸和y軸形成的2D空間內進行平展變換。如果是非flat變換,那麼當z軸值為正或者為負的時候,會出現子元素位於父元素之前或者之後的3D效果。
下面再來看非flat變換效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ position:relative; height:200px; width:200px; margin-bottom:20px; padding:10px; border:1px solid black; } #father{ padding:50px; position:absolute; border:1px solid black; background-color:red; perspective:500px; transform:rotateY(0deg); transform-style:preserve-3d; } #children{ width:100px; height:100px; font-size:12px; text-align:center; line-height:100px; position:absolute; border:1px solid black; background-color:yellow; transform:rotateY(0deg); } table{font-size:12px;width:300px;} .left{text-align:right} </style> <script> function changeFather(value){ let father=document.getElementById('father'); let fatershow=document.getElementById('fatershow'); father.style.transform="rotateY(" + value + "deg)"; fatershow.innerHTML=value + "deg"; } function changeChildren(value){ let children=document.getElementById('children'); let childrenshow=document.getElementById('childrenshow'); children.style.transform="rotateY(" + value + "deg)"; childrenshow.innerHTML=value + "deg"; } window.onload=function(){ let rangef=document.getElementById("rangef"); let rangec=document.getElementById("rangec"); rangef.onmousemove=function(){ changeFather(this.value); } rangec.onmousemove=function(){ changeChildren(this.value); } } </script> </head> <body> <div id="box"> <div id="father"> <div id="children">螞蟻部落</div> </div> </div> <table> <tr> <td class="left">調整紅色:</td> <td><input type="range" step="1" min="-360" max="360" id="rangef" value="0"/></td> </tr> <tr> <td class="left">rotateY:</td> <td>(<span id="fatershow">0deg</span>)</td> </tr> <tr> <td class="left">調整黃色:</td> <td><input type="range" step="1" min="-360" max="360" id="rangec" value="0"/></td> </tr> <tr> <td class="left">rotateY:</td> <td>(<span id="childrenshow">0deg</span>)</td> </tr> </table> </body> </html>
上述程式碼可以通過拖動底部range元素動態演示效果,程式碼執行效果截圖如下:
程式碼分析如下:
(1).將 transform-style屬性值設定為preserve-3d。
(2).於是當子元素進行變換的時候,會在父元素內具有3D效果,從兩段程式碼的執行效果截圖可以看到,flat在父元素內的變換沒有3D效果,而preserve-3d則會保留3D效果,也就是在Z軸方位會具有一前一後的3D立體效果。
通過上述兩個程式碼已經清晰演示了transform-style屬性的功能,關於變換還有很多知識點。
可以參閱CSS3教程transform變換的其他文章,如果有任何問題,可以在文章底部留言,會在第一時間回覆。
相關文章
- CSS3CSSS3
- CSS3簡明教程之初識CSS3CSSS3
- CSS3 quotesCSSS3
- css3省略……CSSS3
- CSS3 remCSSS3REM
- CSS3 vhCSSS3
- CSS3 vwCSSS3
- CSS3 vmaxCSSS3
- CSS3 vminCSSS3
- CSS3 TransitionCSSS3
- CSS3 @supportsCSSS3
- CSS3 currentColorCSSS3
- CSS3 clipCSSS3
- CSS3 ::SelectionCSSS3
- CSS3 counter()CSSS3
- CSS3 attr()CSSS3
- CSS3 orderCSSS3
- CSS3 @keyframesCSSS3
- CSS3 rotate()CSSS3
- CSS3 columnsCSSS3
- CSS3新特性CSSS3
- CSS3 七 字型CSSS3
- CSS3筆記CSSS3筆記
- CSS3初識CSSS3
- css3 漸變CSSS3
- CSS3之背景CSSS3
- CSS3 perspective(n)CSSS3
- CSS3象棋效果CSSS3
- CSS3 之 flexCSSS3Flex
- css3 新特性CSSS3
- css3漸變CSSS3
- CSS3簡明教程之徵服CSS3選擇器CSSS3
- CSS3選擇器02—CSS3部分選擇器CSSS3
- CSS3 backface-visibilityCSSS3
- CSS3 文字效果CSSS3
- Css3中的TransformCSSS3ORM
- Css3中的TransitionCSSS3
- css3核心屬性CSSS3