CSS3学习手记（9） CSS扩展属性

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>