咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS3中设置3D变形的transform-style属性介绍

这篇文章主要介绍“CSS3中设置3D变形的transform-style属性介绍”，在日常操作中，相信很多人在CSS3中设置3D变形的transform-style属性介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3中设置3D变形的transform-style属性介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司是一家专注于成都网站制作、成都做网站、外贸营销网站建设与策划设计,潘集网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:潘集等地区。潘集做网站价格咨询:028-86922220

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. /*改变transform-style的默认值*/  

    46. .three-d {   

    47.     transform-style: preserve-3d;   

    48. }  

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

    其效果如下所示：
    CSS3中设置3D变形的transform-style属性介绍

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

    有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果），如下图所示：
    CSS3中设置3D变形的transform-style属性介绍

    到此，关于“CSS3中设置3D变形的transform-style属性介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    分享题目：CSS3中设置3D变形的transform-style属性介绍
    当前地址：http://cqcxhl.cn/article/jspsoe.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    网站建设 网站设计 网站制作 小程序
    联系我们
    公司地址 人才招聘
    成都 重庆
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    电话：028-86922220
    地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
    版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP