c3動畫 魔方 無限滾動
<!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>Document</title>
<style>
*,
ul,
li {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
.box {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
margin: 200px auto;
animation: dong 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
li {
list-style: none;
display: inline-block;
width: 90px;
height: 90px;
border-radius: 20px;
text-align: center;
line-height: 90px;
background-color: #ccc;
font-size: 40px;
font-weight: 700;
margin: 5px 2px;
}
ul {
width: 300px;
height: 300px;
padding-left: 5px;
position: absolute;
}
.qian li {
background: red;
}
.qian {
transform: translateZ(150px);
}
.hou li {
background: blue;
}
.hou {
transform: translateZ(-150px);
}
.zuo li {
background: deepskyblue;
}
.zuo {
transform: translateX(-150px) rotateY(90deg);
}
.you li {
background: pink;
}
.you {
transform: translateX(150px) rotateY(-90deg);
}
.shang li {
background: yellow;
}
.shang {
transform: translateY(-150px) rotateX(90deg);
}
.xia li {
background: orange;
}
.xia {
transform: translateY(150px) rotateX(-90deg);
}
.box {
transform: rotateY(45deg) rotateX(45deg);
}
@keyframes dong {
0% {
transform: rotateX(0deg) rotateY(120deg);
}
10% {
transform: rotateX(30deg) rotateY(30deg);
}
20% {
transform: rotateX(60deg) rotateY(90deg);
}
30% {
transform: rotateX(90deg) rotateY(10deg);
}
40% {
transform: rotateX(120deg) rotateY(150deg);
}
60% {
transform: rotateX(130deg) rotateY(200deg);
}
70% {
transform: rotateX(180deg) rotateY(260deg);
}
80% {
transform: rotateX(190deg) rotateY(160deg);
}
90% {
transform: rotateX(140deg) rotateY(90deg);
}
100% {
transform: rotateX(120deg) rotateY(120deg);
}
}
</style>
</head>
<body>
<div class="box">
<ul class="qian">
<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>
<ul class="hou">
<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>
<ul class="zuo">
<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>
<ul class="you">
<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>
<ul class="shang">
<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>
<ul class="xia">
<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>
</body>
</html>