老师代码里只给了骰子每个面的绝对定位，并没有给父元素相对定位呀，那么每个面是依照什么定位的？

来源：6-6 backface-visibility

银白色暴风雪

2017-01-23 13:42:09

<!DOCTYPE html>
<html>
<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>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
<div class="cube c2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
</body>
</html>

写回答

1回答