transform-style 指定嵌套元素是怎样在三维空间中呈现
语法
transform-style:flat|preserve-3d; 默认值 flat
perspective 指定观察者[z=0]平面的距离，使具有三维位置变换的元素产生透视效果
语法
perspective:number|none;
backface-visibility 指定元素背面面向用户时可见
语法：backface-visibility:visible|hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>backface-visibility</title> <style type="text/css"> 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; } .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); } .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>
