mozilla
您的搜索结果

    backface-visibility

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

    概述

    backface-visibility 属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。

    在某些情况下,我们不希望元素内容在背面可见,比如实现翻牌效果。

    因为2D变换无透视效果,故该属性对2D变换无效。

    • 初始值 visible
    • 适用元素 transformable elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 as specified
    • 可动画
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    Formal syntax:  visible | hidden 
    
    backface-visibility: visibility
    
    backface-visibility: visible
    backface-visibility: hidden
    

    visibility
    关键字,指定元素背面是否可见,可为以下值:
    • visible 表示背面可见,允许显示正面的镜像。
    • hidden 表示背面不可见。

    示例

    有透明的立方体

    HTML Content

    <table>
       <tbody>
          <tr>
             <th><code>backface-visibility: visible;</code>
             </th>
             <th><code>backface-visibility: hidden;</code>
             </th>
          </tr>
          <tr>
             <td>
                <div class="container">
                   <div class="cube showbf">
                      <div class="face front">1</div>
                      <div class="face back">2</div>
                      <div class="face right">3</div>
                      <div class="face left">4</div>
                      <div class="face top">5</div>
                      <div class="face bottom">6</div>
                   </div>
                </div>
                <p>All the faces are transparent and the three back faces are visible through the front ones.</p>
             </td>
             <td>
                <div class="container">
                   <div class="cube hidebf">
                      <div class="face front">1</div>
                      <div class="face back">2</div>
                      <div class="face right">3</div>
                      <div class="face left">4</div>
                      <div class="face top">5</div>
                      <div class="face bottom">6</div>
                   </div>
                </div>
                <p>No face is opaque, but the three back faces are always hidden now.</p>
             </td>
          </tr>
       </tbody>
    </table>

    CSS Content

    /* Shorthand classes that will show or hide the three back faces of the "cube" */
     .hidebf div {
       backface-visibility: hidden;
       -webkit-backface-visibility: hidden;
    }
    .showbf div {
       backface-visibility: visible;
       -webkit-backface-visibility: visible;
    }
    
    /* Define the container div, the cube div, and a generic face */
     .container {
       width: 150px;
       height: 150px;
       margin: 75px 0 0 75px;
       border: none;
    }
    .cube {
       width: 100%;
       height: 100%;
       perspective: 300px;
       perspective-origin: 150% 150%;
       transform-style: preserve-3d;
       -webkit-perspective: 300px;
       -webkit-perspective-origin: 150% 150%;
       -webkit-transform-style: preserve-3d;
    }
    .face {
       display: block;
       position: absolute;
       width: 100px;
       height: 100px;
       border: none;
       line-height: 100px;
       font-family: sans-serif;
       font-size: 60px;
       color: white;
       text-align: center;
    }
    
    /* Define each face based on direction */
     .front {
       background: rgba(0, 0, 0, 0.3);
       transform: translateZ(50px);
       -webkit-transform: translateZ(50px);
    }
    .back {
       background: rgba(0, 255, 0, 1);
       color: black;
       transform: rotateY(180deg) translateZ(50px);
       -webkit-transform: rotateY(180deg) translateZ(50px);
    }
    .right {
       background: rgba(196, 0, 0, 0.7);
       transform: rotateY(90deg) translateZ(50px);
       -webkit-transform: rotateY(90deg) translateZ(50px);
    }
    .left {
       background: rgba(0, 0, 196, 0.7);
       transform: rotateY(-90deg) translateZ(50px);
       -webkit-transform: rotateY(-90deg) translateZ(50px);
    }
    .top {
       background: rgba(196, 196, 0, 0.7);
       transform: rotateX(90deg) translateZ(50px);
       -webkit-transform: rotateX(90deg) translateZ(50px)
    }
    .bottom {
       background: rgba(196, 0, 196, 0.7);
       transform: rotateX(-90deg) translateZ(50px);
       -webkit-transform: rotateX(-90deg) translateZ(50px);
    }
    
    /* Make the table a little nicer */
    th, p, td {
       background-color: #EEEEEE;
       margin: 0px;
       padding: 6px;
       font-family: sans-serif;
       text-align: left;
    }

    结果

    标准

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    兼容

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 12-webkit 10 (10)-moz
    16 (16)
    10 15-webkit (Yes)-webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 3.0-webkit (Yes)-webkit 10.0 (10)-moz
    16.0 (16)
    8.1 (Yes)-webkit (Yes)-webkit

    See also

    文档标签和贡献者

    此页面的贡献者有: hutuxu
    最后编辑者: hutuxu,