CSS3 transform-style

admin發表於2018-12-22
CSSS3ORM

由名稱可以猜測，此屬性可以用於規定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元素動態演示效果，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/22/123225c01ntnmtgt5ll3lk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼演示分析如下：

（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元素動態演示效果，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/22/123252vs7zdkcapwzyp7fv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.將 transform-style屬性值設定為preserve-3d。

（2）.於是當子元素進行變換的時候，會在父元素內具有3D效果，從兩段程式碼的執行效果截圖可以看到，flat在父元素內的變換沒有3D效果，而preserve-3d則會保留3D效果，也就是在Z軸方位會具有一前一後的3D立體效果。

通過上述兩個程式碼已經清晰演示了transform-style屬性的功能，關於變換還有很多知識點。

可以參閱CSS3教程transform變換的其他文章，如果有任何問題，可以在文章底部留言，會在第一時間回覆。

相關文章