• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • transform-style

    版本:CSS3

    CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

    示例

    /* Keyword values */
    transform-style: flat;
    transform-style: preserve-3d;
    
    /* Global values */
    transform-style: inherit;
    transform-style: initial;
    transform-style: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE不支持transform-style,其余浏览器都支持transform-style

    语法

    transform-styleflat| preserve-3d

    取值

    • flat:设置元素的子元素位于该元素的平面中。
    • preserve-3d:指示元素的子元素应位于 3D 空间中。

    说明:

    指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。

    • 当该属性值为preserve-3d时,元素将会创建局部堆叠上下文。
    • 决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义transform-style属性。
    • 对应的脚本特性为transformStyle
    默认值flat
    适用于变换元素
    继承性
    动画性
    计算值指定值

    实例

    div{
     transform:rotatey(60deg);
     transform-style:preserve-3d;
     -webkit-transform:rotatey(60deg); /*safari and chrome*/
     -webkit-transform-style:preserve-3d; /*safari and chrome*/
    }
    

    上篇:transform-origin

    下篇:perspective