您现在的位置是：网站首页> 编程资料编程资料

CSS3中设置3D变形的transform-style属性详解CSS3的常见transformation图形变化用法小结浅谈CSS3中的变形功能-transform功能

2023-10-22 220人已围观

简介 transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解,需要的朋友可以参考下

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">  
  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-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: 

    上一篇：css 元素选择器的简单实例CSS文本超出指定宽度后隐藏并显示为省略号的实现方法CSS3 checkbox复选框特效源码 12种css3实现的模拟3D行星运转效果源码CSS的writing-mode文字排版属性使用教程CSS3中的Media Queries学习笔记详解CSS3的perspective属性设置3D变换距离的方法CSS3中设置3D变形的transform-style属性详解css布局小技巧分享(必看)

    下一篇：详解CSS3的perspective属性设置3D变换距离的方法CSS文本超出指定宽度后隐藏并显示为省略号的实现方法CSS3 checkbox复选框特效源码 12种css3实现的模拟3D行星运转效果源码CSS的writing-mode文字排版属性使用教程CSS3中的Media Queries学习笔记CSS3中设置3D变形的transform-style属性详解css 元素选择器的简单实例css布局小技巧分享(必看)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网