| è¯æ³•é¡¹ç›® | 说明 |
|---|---|
| åˆå§‹å€¼ | visible |
| 适用于 | å—å…ƒç´ å’Œè¡Œå†…å…ƒç´ |
| å¯å¦ç»§æ‰¿ | å¦ |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
visible：默认值，旋转的时候背景å¯è§ã€‚
hidden：旋转的时候背景ä¸å¯è§ã€‚
.demo_box{
position:relative;
background:#4d6ea6;
margin:50px;
float:left;
-webkit-animation:demo_box 4s infinite linear;
-moz-animation:demo_box 4s infinite linear;
}
.show{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
}
.hidden{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}
.mod_run_code{
-webkit-perspective-origin:right top;
-moz-perspective-origin:right top;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-webkit-transform: perspective(500px);
-moz-transform: perspective(500px);
}
@-webkit-keyframes demo_box{
0%{-webkit-transform:perspective(500px) rotateX(0deg);}
100%{-webkit-transform:perspective(500px) rotateX(360deg);}
}
@-moz-keyframes demo_box{
0%{-moz-transform:perspective(500px) rotateX(0deg);}
100%{-moz-transform:perspective(500px) rotateX(360deg);}
}
<div class="demo_box show">背景å¯è§</div>
<div class="demo_box hidden">背景éšè—</div>
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |