首页 > 开发 > CSS > 正文

CSS3中设置3D变形的transform-style属性详解

2024-07-11 08:32:57
字体:
来源:转载
供稿:网友

transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。

transform-style属性的使用语法非常简单:

CSS Code复制内容到剪贴板
  1. 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模板

XML/HTML Code复制内容到剪贴板
  1. <div class="wrap">       <div class="spin">  
  2.         <div class="rotate">               <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
  3.         </div>       </div>  
  4. </div>   <div class="wrap">  
  5.     <div class="spin">           <div class="rotate three-d">  
  6.             <img src="images/cardKingClub.png" alt="" width="142" height="200" />           </div>  
  7.     </div>   </div>  

CSS

CSS Code复制内容到剪贴板
  1. .wrap {        width: 500px;   
  2.     height: 300px;        margin: 30px auto;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表