<!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>
* {
padding: 0;
margin: 0;
}
.box {
width: 170px;
transform-style: preserve-3d;
animation: dh 3s linear infinite;
margin: 200px auto;
}
.box div {
position: absolute;
width: 170px;
height: 170px;
overflow: hidden;
background-color: rgb(22, 236, 208);
}
ul {
width: 190px;
height: 190px;
}
ul li {
display: inline-block;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
margin-right: 7px;
margin-bottom: 7px;
background-color: pink;
}
.qian {
transform: translateZ(85px);
}
.hou {
transform: rotateY(180deg) translateZ(85px);
}
.zuo {
transform: rotateY(-90deg) translateZ(85px);
}
.you {
transform: rotateY(90deg) translateZ(85px);
}
.top {
transform: rotateX(90deg) translateZ(85px);
}
.bt {
transform: rotateX(-90deg) translateZ(85px);
}
@keyframes dh {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<div class="qian">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="hou">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="zuo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="you">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="bt">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
</body>
</html>