• 技术文章 > web前端 > css教程

    transform-style属性怎么用

    青灯夜游 青灯夜游 2019-02-11 14:40:43 原创 118
    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中文网其它相关文章!

    第六期线上培训班
    专题推荐: transform-style属性 CSS3
    上一篇:transform属性怎么使用 下一篇:transform-origin属性怎么用

    相关文章推荐

    • 实例详解css3特效之3D翻牌效果 • Bootstrap轮播加上css3动画,炫酷到底!_javascript技巧 • jQuery+CSS3实现3D立方体旋转效果_jquery • CSS3转换 | css遮罩_html/css_WEB-ITnose

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网