背面能见度 | 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 |
背面能见度 | backface-visibility (Transforms) - CSS 中文开发手册 - Break易站