?
This document uses PHP Chinese website manual Release
backface-visibility:visible | hidden
默認(rèn)值:visible
適用于:變換元素
繼承性:無
動(dòng)畫性:否
計(jì)算值:指定值
媒體:視覺
visible:指定元素背面可見,允許顯示正面的鏡像。
hidden:指定元素背面不可見
決定一個(gè)元素背面面向用戶時(shí)是否可見,需要直接在該元素上定義 <' backface-visibility '> 屬性,而不能在其父元素上,因?yàn)樵搶傩阅J(rèn)為不可繼承。
對(duì)應(yīng)的腳本特性為backfaceVisibility。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit- |
10.0-11.0-ms- | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+ | |
Edge | 16.0+ | 36.0+ | 40.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>backface-visibility_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" /> <meta name="copyright" content="www.doyoe.com" /> <style> body { -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50%; perspective-origin: 50%; } .cube { display: inline-block; width: 100px; height: 100px; margin: 50px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 5s infinite; animation: rotate 5s infinite; } .cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; } .front { -webkit-transform: translatez(50px); transform: translatez(50px); } .back { -webkit-transform: rotatey(180deg) translatez(50px); transform: rotatey(180deg) translatez(50px); } .right { -webkit-transform: rotatey(90deg) translatez(50px); transform: rotatey(90deg) translatez(50px); } .left { -webkit-transform: rotatey(-90deg) translatez(50px); transform: rotatey(-90deg) translatez(50px); } .top { -webkit-transform: rotatex(90deg) translatez(50px); transform: rotatex(90deg) translatez(50px); } .bottom { -webkit-transform: rotatex(-90deg) translatez(50px); transform: rotatex(-90deg) translatez(50px); } @-webkit-keyframes rotate { from { -webkit-transform: rotatey(0); } to { -webkit-transform: rotatey(360deg); } } @keyframes rotate { from { transform: rotatey(0); } to { transform: rotatey(360deg); } } .c1 > div { -webkit-backface-visibility: visible; backface-visibility: visible; } .c2 > div { -webkit-backface-visibility: hidden; backface-visibility: hidden; } </style> </head> <body> <div class="cube c1"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> <div class="cube c2"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例