zoukankan      html  css  js  c++  java
  • CSS3学习手记(9) CSS扩展属性

    transform-style 指定嵌套元素是怎样在三维空间中呈现

    语法

    transform-style:flat|preserve-3d;        默认值 flat

     

    perspective 指定观察者[z=0]平面的距离,使具有三维位置变换的元素产生透视效果

    语法

    perspective:number|none;

    backface-visibility 指定元素背面面向用户时可见

    语法:backface-visibility:visible|hidden

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>backface-visibility</title>
    <style type="text/css">
    body {
        -webkit-perspective: 800px;
                perspective: 800px;
        -webkit-perspective-origin: 50%;
                perspective-origin: 50%;
    }
    .cube { display: inline-block; width: 100px; height: 100px; margin: 50px;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
    }
    .cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; }
    .front {
        -webkit-transform: translatez(50px);
                transform: translatez(50px);
    }
    .back {
        -webkit-transform: rotatey(180deg) translatez(50px);
                transform: rotatey(180deg) translatez(50px);
    }
    .right {
        -webkit-transform: rotatey(90deg) translatez(50px);
                transform: rotatey(90deg) translatez(50px);
    }
    .left {
        -webkit-transform: rotatey(-90deg) translatez(50px);
                transform: rotatey(-90deg) translatez(50px);
    }
    .top {
        -webkit-transform: rotatex(90deg) translatez(50px);
                transform: rotatex(90deg) translatez(50px);
    }
    .bottom {
        -webkit-transform: rotatex(-90deg) translatez(50px);
                transform: rotatex(-90deg) translatez(50px);
    }
    .c1 > div {
        -webkit-backface-visibility: visible;
                backface-visibility: visible;
    }
    .c2 > div {
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
    }
    </style>
    </head>
    <body>
    <div class="cube c1">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
    <div class="cube c2">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    解决ssh: connect to host github.com port 22: Connection refused
    sudo/su命令免密执行
    Linux tar.gz、tar、bz2、zip 等解压缩、压缩命令详解
    项目实战——校验文件名和邮箱地址
    项目实战:判断闰年平年并输出某月的天数
    ubuntu软件更新时出现没有Release文件
    项目实战:根据出生日期判断星座
    项目实战--实现淡旺季飞机票打折
    xxx.java:1: 错误: 类xxx是公共的, 应在名为 xxx.java 的文件中声明 public class xxx
    32位int整数范围
  • 原文地址:https://www.cnblogs.com/zry2510/p/7084034.html
Copyright © 2011-2022 走看看