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 Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python每天定时运行某程序代码
2019/08/16 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Opencv求取连通区域重心实例
2020/06/04 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
回门宴新郎答谢词
2014/01/12 职场文书
小班评语大全
2014/05/04 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Python 内置函数速查表一览
2021/06/02 Python