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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
HTTP中的Content-type详解
Jan 18 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php动态变量定义及使用
2015/06/10 PHP
开启PHP的伪静态模式
2015/12/31 PHP
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
python抓取网页内容示例分享
2014/02/24 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python 实现敏感词过滤的方法
2019/01/21 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
办公室副主任职责范本
2014/03/08 职场文书
社团活动总结模板
2014/06/30 职场文书
民主评议党员总结
2014/10/20 职场文书
作弊检讨书
2015/01/27 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
高一作文之乐趣
2019/11/21 职场文书
python基础之文件处理知识总结
2021/05/23 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Java 数组的使用
2022/05/11 Java/Android