We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS



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



适用元素transformable elements
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar


Formal syntax:  visible | hidden 
backface-visibility: visibility

backface-visibility: visible
backface-visibility: hidden

  • visible 表示背面可见,允许显示正面的镜像。
  • hidden 表示背面不可见。



HTML Content

         <th><code>backface-visibility: visible;</code>
         <th><code>backface-visibility: hidden;</code>
            <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>
            <p>All the faces are transparent and the three back faces are visible through the front ones.</p>
            <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>
            <p>No face is opaque, but the three back faces are always hidden now.</p>

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  


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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


此页面的贡献者: broven, fscholz, Sebastianz, hutuxu
最后编辑者: broven,