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


Posted in HTML / CSS onMay 23, 2016

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.     width500px;   
  3.     height300px;   
  4.     margin30px auto;   
  5.     positionrelative;   
  6.     backgroundurl(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.     width142px;   
  20.     height200px;   
  21.     positionabsolute;   
  22.     top: 50%;   
  23.     left: 50%;   
  24.     margin-left: -72px;   
  25.     margin-top: -101px;   
  26.     border1px dashed orange;   
  27.     cursorpointer;   
  28.     transform-style: preserve-3d;   
  29. }   
  30. /*调用动画*/  
  31. .spin:hover{   
  32.     animation:spin 5s linear infinite;   
  33. }   
  34. .rotate {   
  35.     backgroundurl(images/cardKingClub.png) no-repeat center;   
  36.     background-size: 100% 100%;   
  37.     border5px solid hsla(50,50%,50%,.9);   
  38.     transform: perspective(200px) rotateY(45deg);   
  39. }   
  40. .rotate img{   
  41.     border1px 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属性详解

HTML / CSS 相关文章推荐
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
css 元素选择器的简单实例
May 23 #HTML / CSS
css sprite简单实例
May 23 #HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 #HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 #HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 #HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 #HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
You might like
php 函数中使用static的说明
2012/06/01 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
详解PHP队列的实现
2019/03/14 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python 模拟登陆163邮箱
2020/12/15 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
小松树教学反思
2014/02/11 职场文书
市场专员岗位职责
2014/02/14 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电