纯CSS3旋转镂空魔方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/project05.css">
</head>
<body>
<div class="box">
<div>
<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>
<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>
<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>
<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>
<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>
<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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 300px;
height: 300px;
transform-style: preserve-3d;
margin: 200px auto;
position: relative;
animation: move 5s ease-in infinite alternate;
transform: rotateX(-30deg) rotateY(30deg);
}
.box>div {
width: 300px;
height: 300px;
position: absolute;
}
.box>div:nth-child(1) {
transform: translateZ(150px);
}
.box>div:nth-child(2) {
transform: rotateX(90deg) translateZ(150px);
}
.box>div:nth-child(3) {
transform: rotateX(-90deg) translateZ(150px);
}
.box>div:nth-child(4) {
transform: rotateY(90deg) translateZ(150px);
}
.box>div:nth-child(5) {
transform: rotateY(-90deg) translateZ(150px);
}
.box>div:nth-child(6) {
transform: rotateY(180deg) translateZ(150px);
}
div>ul {
display: flex;
flex-wrap: wrap;
}
ul > li {
display: block;
width: 90px;
height: 90px;
margin: 5px;
text-align: center;
line-height: 90px;
font-size: 48px;
font-weight: 700;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box>div:nth-child(1) li {
background-color: red;
}
.box>div:nth-child(2) li {
background-color: orange;
}
.box>div:nth-child(3) li {
background-color: yellow;
}
.box>div:nth-child(4) li {
background-color: green;
}
.box>div:nth-child(5) li {
background-color: cyan;
}
.box>div:nth-child(6) li {
background-color: blue;
}
.box:hover {
animation-play-state: paused;
}
@keyframes move {
0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
20% {transform: rotateX(20deg) rotateY(40deg) rotateZ(30deg);}
40% {transform: rotateX(-20deg) rotateY(-10deg) rotateZ(90deg);}
60% {transform: rotateX(50deg) rotateY(-160deg) rotateZ(-10deg);}
80% {transform: rotateX(15deg) rotateY(20deg) rotateZ(-50deg);}
100% {transform: rotateX(30deg) rotateY(80deg) rotateZ(165deg);}
}