<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>色子</title>
<style>
html {
height: 100%;
}
@keyframes ani {
0%,
100% {
transform: rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg);
}
50% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.grid {
text-align: center;
transform-style: preserve-3d;
perspective: 9500px;
perspective-origin: 25% 75%;
font-size: 0;
backface-visibility: visible;
transform: rotateX(-45deg);
position: relative;
150px;
height: 150px;
animation: ani 5s linear infinite;
}
.grid_item {
background: #b34747;
opacity: 0.95;
150px;
height: 150px;
color: #ffffff;
font-weight: bold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
padding: 25px;
box-sizing: border-box;
}
.grid_item:nth-of-type(1) {
transform: rotateY(90deg) translateZ(75px);
background: blue;
}
.grid_item:nth-of-type(2) {
background: red;
transform: translateZ(-75px);
}
.grid_item:nth-of-type(3) {
transform: rotateY(90deg) translateZ(-75px);
background: orange;
}
.grid_item:nth-of-type(4) {
transform: translateZ(75px);
background: black;
}
.grid_item:nth-of-type(5) {
transform: rotateX(90deg) translateZ(75px);
}
.grid_item:nth-of-type(6) {
transform: rotateX(90deg) translateZ(-75px);
}
.grid_item {
text-transform: uppercase;
}
.grid_item>div {
font-size: 0;
display: flex;
align-items: center;
justify-content: space-around;
100%;
height: 100%;
flex-wrap: wrap;
position: relative;
}
.point_container {
100%;
text-align: justify;
text-align-last: justify;
}
.center {
position: absolute;
background: #b34747;
}
.point {
display: inline-block;
20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
.p1 {
60px;
height: 60px;
}
.p2 {
40px;
height: 40px;
}
.p3 {
35px;
35px;
}
.p3:first-child {
align-self: flex-start;
}
.p3:last-child {
align-self: flex-end;
}
.p4,
.p5 {
30px;
height: 30px;
}
</style>
</head>
<body>
<div class="grid">
<div>
<div class="grid_item">
<div>
<div class="point p1"></div>
</div>
</div>
<div class="grid_item">
<div>
<div class="point p2"></div>
<div class="point p2"></div>
</div>
</div>
<div class="grid_item">
<div>
<div class="point p3"></div>
<div class="point p3"></div>
<div class="point p3"></div>
</div>
</div>
<div class="grid_item">
<div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
</div>
</div>
<div class="grid_item">
<div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
<div class="point p4 center"></div>
</div>
</div>
<div class="grid_item">
<div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
<div class="point_container">
<div class="point p4"></div>
<div class="point p4"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>