栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

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

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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.   
  2.       
  3.           
  4.             

      
  5.         
  
  •     
  •   
  •   
  •   
  •       
  •           
  •             

      
  •         
  •   
  •       
  •   
  • CSS

    CSS Code复制内容到剪贴板
    1. .wrap {   
    2.     width: 500px;   
    3.     height: 300px;   
    4.     margin: 30px auto;   
    5.     position: relative;   
    6.     background: url(images/bg-grid.jpg) no-repeat center center;   
    7.     background-size: 100% 100%;   
    8. }   
    9.   
    10. @keyframes spin{   
    11.     0%{   
    12.         transform:rotateY(0deg)   
    13.     }   
    14.     100%{   
    15.         transform:rotateY(360deg)   
    16.     }   
    17. }   
    18. .spin {   
    19.     width: 142px;   
    20.     height: 200px;   
    21.     position: absolute;   
    22.     top: 50%;   
    23.     left: 50%;   
    24.     margin-left: -72px;   
    25.     margin-top: -101px;   
    26.     border: 1px dashed orange;   
    27.     cursor: pointer;   
    28.     transform-style: preserve-3d;   
    29. }   
    30.   
    31. .spin:hover{   
    32.     animation:spin 5s linear infinite;   
    33. }   
    34. .rotate {   
    35.     background: url(images/cardKingClub.png) no-repeat center;   
    36.     background-size: 100% 100%;   
    37.     border: 5px solid hsla(50,50%,50%,.9);   
    38.     transform: perspective(200px) rotateY(45deg);   
    39. }   
    40. .rotate img{   
    41.     border: 1px solid green;   
    42.     transform: rotateX(15deg) translateZ(10px);   
    43.     transform-origin: 0 0 40px;   
    44. }   
    45.   
    46. .three-d {   
    47.     transform-style: preserve-3d;   
    48. }  

    特别声明:为了节省篇幅,代码中CSS3属性代码省去了各浏览器的私有前缀,在实际操作中,需要将各浏览器前缀加上,才会有效果。

    其效果如下所示:
    2016523112112665.png (391×487)

    正如您所看到的,当元素设置.rotate设置了flat值时,其子元素img不会根据translateZ()值摊开,而在同一平面旋转,如上图上部分所示;当元素.rotate设置了preserve-3d值时,其子元素img会根据translateZ()值摊开,不再会堆叠在一起,如上图下部分所示。

    有一点需要特别提醒大家,如果你的元素设置了transform-style值为preserve-3d,就不能为了防止子元素溢出容器而设置overflow值为hidden,如果设置了overflow:hidden同样可以迫死子元素出现在同一平面(和元素设置了transform-style为flat一样的效果),如下图所示:
    2016523112154847.jpg (463×402)

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215887.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号