背面能见度 | backface-visibility (Transforms) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    背面能见度 | backface-visibility (Transforms) - CSS 中文开发手册

    这是一种实验技术

    由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以查阅用法。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

    的backface-visibility CSS属性决定面对用户时该元件的背面是否是可见。当设置为可见时,元素的背面始终是透明的背景,而显示出元素正面的镜像。

    /* Keyword values */
    backface-visibility: visible;
    backface-visibility: hidden;
    
    /* Global values */
    backface-visibility: inherit;
    backface-visibility: initial;
    backface-visibility: unset;

    语法

    有些情况下,我们不希望通过背面看到某个元素的正面,就像做翻卡效果(两个元素并排设置)一样。

    此属性对2D变换没有影响,因为没有透视。

    Initial value

    visible

    Applies to

    transformable elements

    Inherited

    no

    Media

    visual

    Computed value

    as specified

    Animation type

    discrete

    Canonical order

    the unique non-ambiguous order defined by the formal grammar

    估计值

    visible——此关键字意味着背面可见,允许正面显示为镜像。

    hidden——这个关键字意味着背面不可见,隐藏正面。

    形式语法

    visible | hidden

    实例

    此示例显示具有透明面的立方体。

    HTML内容

    <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内容

    /* 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: 550px;
      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 2The definition of ‘backface-visibility‘ in that specification.

    Editor‘s Draft

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    12-webkit

    (Yes)-webkit (Yes)

    10 (10)-moz 16 (16)1

    102

    15-webkit

    (Yes)-webkit

    Feature

    Android

    Chrome for Android

    Edge

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    3.0-webkit

    (Yes)-webkit

    (Yes)-webkit (Yes)

    10.0 (10)-moz 16.0 (16)1

    8.1 11-webkit2

    (Yes)-webkit

    (Yes)-webkit

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32257.html

    背面能见度 | backface-visibility (Transforms) - CSS 中文开发手册 - Break易站

    上一篇:java基础—继承题目:编写一个Animal类,具有属性:种类;具有功能:吃、睡。定义其子类Fish


    下一篇:自动换行 | word-wrap (Text) - CSS 中文开发手册 - Break易站