前端_运动的魔方
作者：互联网
预览
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
margin: 150px auto;
font-size: 30px;
position: relative;
transform-style: preserve-3d;
animation: run 8s linear infinite alternate ;
}
.box div {
width: 300px;
height: 300px;
position: absolute;
}
li {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
margin: 5px;
float: left;
border-radius: 20%;
}
.front li {
background-color: green;
}
.behind li {
background-color:chartreuse;
}
.top li {
background-color: purple;
}
.bottom li {
background-color: cornflowerblue;
}
.left li {
background-color: darkorange;
}
.right li {
background-color: #37ffc7;
}
.front {
background:transparent;
transform: rotateX(-90deg) translateZ(150px); }
.behind {
background:transparent;
transform: rotateX(90deg) translateZ(150px);
}
.left {
background:transparent;
transform: rotateY(-90deg) translateZ(150px);
}
.right {
background:transparent;
transform: rotateY(90deg) translateZ(150px) ;
}
.top {
background:transparent;
transform: translateZ(-150px) ;
}
.bottom {
background:transparent;
transform: translateZ(150px) ;
}
.box:hover {
animation-play-state:paused
}
@keyframes run{
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
20% {
transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
}
40% {
transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
}
60% {
transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
}
80% {
transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
}
100% {
transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
}
}
</style>
<body>
<div class="box">
<div class="front">
<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="behind">
<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="left">
<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="right">
<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="bottom">
<ul>
<li>q</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>
标签：魔方,前端,transform,li,rotateX,rotateY,background,运动,150px 来源： https://www.cnblogs.com/zhuhukang/p/15838831.html