<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
perspective: 800px;
-webkit-perspective: 800px; /*三维效果产生透视的效果的程度*/
perspective-origin: 50%;
-webkit-perspective-origin: 50%; /*透视点的位置*/
}
.dice{
display: inline-block; /*行级显示的块级元素*/
margin: 20px;
width: 100px;
height: 100px;
transform-style: preserve-3d; /*三维空间呈现的样式为3d呈现*/
}
.dice>div{
position: absolute; /*绝对定位*/
width: 100%;
height: 100%;
font-weight: bold;
border: 1px solid;
background-color: rgba(0,0,0,.1);
box-shadow: inset 0 0 0.5 rgba(0,0,0,0.5);
color: grey;
line-height: 100px;
text-align: center;
}
.front{
-webkit-transform: translateZ(50px);
}
.back{
transform: rotateY(180deg) translateZ(50px);
}
.right{
transform: rotateY(90deg) translateZ(50px);
}
.left{
transform: rotateY(-90deg) translateZ(50px);
}
.top{
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
transform: rotateX(-90deg) translateZ(50px);
}
.one>div{
backface-visibility: visible;
}
.two>div{
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="dice one">
<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="dice two">
<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>
09-11
09-11
09-11
09-11
09-11