您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 transform-style

2018-12-22 12:31| 作者: admin| 查看: 991| 评论: 0|来自: 蚂蚁部落

由名称可以猜测,此属性可以用于规定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变换的其他文章,如果有任何问题,可以在文章底部留言,会在第一时间回复。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 rem下一篇:CSS word-break

最新评论

返回顶部