CSS3中设置3D变形的transform-style属性介绍
这篇文章主要介绍“CSS3中设置3D变形的transform-style属性介绍”,在日常操作中,相信很多人在CSS3中设置3D变形的transform-style属性介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3中设置3D变形的transform-style属性介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联公司是一家专注于成都网站制作、成都做网站、外贸营销网站建设与策划设计,潘集网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:潘集等地区。潘集做网站价格咨询:028-86922220
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。
transform-style属性的使用语法非常简单:
CSS Code复制内容到剪贴板
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复制内容到剪贴板