CSS3中设定三d形变的transform

日期：2021-01-20 类型：科技新闻 

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

transform-style特性是三d室内空间1个关键特性，特定嵌套循环元素怎样在三d室内空间中展现。他关键有两个特性值：flat和preserve⑶d。

transform-style特性的应用英语的语法十分简易：

CSS Code拷贝內容到剪贴板
  1. transform-style: flat | preserve⑶d  

在其中flat值为默认设置值，表明全部子元素在2D平面展现。preserve⑶d表明全部子元素在三d室内空间中展现。

也便是说，假如对1个元素设定了transform-style的值为flat，则该元素的全部子元素都将被平展到该元素的2D平面中开展展现。沿着X轴或Y轴方位转动该元素将致使坐落于正或负Z轴部位的子元素显示信息在该元素的平面上，而并不是它的前面或后边。假如对1个元素设定了transform-style的值为preserve⑶d，它表明不实行平展实际操作，他的全部子元素坐落于三d室内空间中。

transform-style特性必须设定在父元素中，而且高于任何嵌套循环的形变元素。最终，大家应用1个旋转的事例，来加深1下对transform-style特性的印象：
HTML模版

XML/HTML Code拷贝內容到剪贴板
  1. <div class="wrap">  
  2.     <div class="spin">  
  3.         <div class="rotate">  
  4.             <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
  5.         </div>  
  6.     </div>  
  7. </div>  
  8. <div class="wrap">  
  9.     <div class="spin">  
  10.         <div class="rotate three-d">  
  11.             <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
  12.         </div>  
  13.     </div>  
  14. </div>  

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⑶d;   
  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⑶d;   
  48. }  

非常申明：以便节约篇数，编码中CSS3特性编码省去了各访问器的独享前缀，在具体实际操作中，必须将各访问器前缀再加，才会合理果。

其实际效果以下所示：

正如您所看到的，当元素设定.rotate设定了flat值时，其子元素img不容易依据translateZ()值摊开，而在同1平面转动，如上图上一部分所示；当元素.rotate设定了preserve⑶d值时，其子元素img会依据translateZ()值摊开，已不会层叠在1起，如上图下一部分所示。

有1点必须非常提示大伙儿，假如你的元素设定了transform-style值为preserve⑶d，就不可以以便避免子元素外溢器皿而设定overflow值为hidden，假如设定了overflow:hidden一样能够迫死子元素出現在同1平面（和元素设定了transform-style为flat1样的实际效果），以下图所示：

上一篇：CSS 之margin专业知识点(必看) 返回下一篇：没有了