首页 / css教程

    transform-style属性怎么用

    类型:原创      发布者:青灯夜游2019-02-12 10:18:31

    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属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <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 */
    }
    </style>
    </head>
    <body>
    <div id="div1">
      <div id="div2">HELLO
      <div id="div3">YELLOW</div>
      </div>
    </div>
    </body>
    </html>

    效果图:

    1.jpg

    以上就是transform-style属性怎么用的详细内容,更多请关注php中文网其它相关文章!

php中文网第五期线上直播培训班

PHP中文网

未登录