目录
css3动画手册
backface-visibility[隐藏内容的背面]
语法
backface-visibility: visible | hidden
语法项目 | 说明 |
---|---|
初始值 | visible |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
backface-visibility
属性可用于隐藏内容的背面。默认情况下,背面可见,这意味着即使在翻转后,变换的内容仍然可见。但当 backface-visibility
设置为 hidden
时,旋转后内容将隐藏,因为旋转后正面将不再可见。
取值
visible
:默认值,旋转的时候背景可见。
hidden
:旋转的时候背景不可见。
实例代码
CSS
.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);} }
html
背景可见
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |