php的style属性,transform-style属性怎么用

transform-style属性用来指定嵌套元素是怎样在三维空间中呈现。当值为flat时，表示所有子元素在2D平面呈现；值为preserve-3d时，表示所有子元素在3D空间中呈现。

CSS3 transform-style属性

作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法：transform-style: flat|preserve-3d;

flat：子元素将不保留其 3D 位置。

preserve-3d：子元素将保留其 3D 位置。

注：该属性必须与 transform 属性一同使用。

CSS3 transform-style属性的使用示例

#div1

{

position: relative;

height: 200px;

width: 200px;

margin: 100px;

padding:10px;

border: 1px solid black;

}

#div2

{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: red;

transform: rotateY(60deg);

transform-style: preserve-3d;

-webkit-transform: rotateY(60deg); /* Safari and Chrome */

-webkit-transform-style: preserve-3d; /* Safari and Chrome */

}

#div3

{

padding:40px;

position: absolute;

border: 1px solid black;

background-color: yellow;

transform: rotateY(80deg);

-webkit-transform: rotateY(-60deg); /* Safari and Chrome */

}

HELLO

YELLOW

效果图：