<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔方</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
position: relative;
text-align: center;
transform-style: preserve-3d;
/*perspective: 1000px;*/
/*transform: rotateX(30deg);*/
transform-origin: center;
animation: rotate 10s linear infinite alternate;
}
ul{
position: absolute;
list-style: none;
font-size: 0;
margin-top: 200px;
width: 300px;
height: 300px;
left: 50%;
margin-left: -150px;
}
ul li{
display: inline-block;
font-size: 24px;
width: 90px;
height: 90px;
margin: 5px;
/*background: red;*/
line-height: 90px;
border-radius: 10px;
opacity: 0.8;
}
.before li{
background: red;
}
.before{
transform: translateZ(150px);
}
.after li{
background: yellow;
}
.after{
transform: translateZ(-150px);
}
.left li{
background: blue;
}
.left{
transform: translateX(-150px) rotateY(90deg);
}
.right li{
background: green;
}
.right{
transform: translateX(150px) rotateY(90deg);
}
.top li{
background: #ccc;
}
.top{
transform: translateY(-150px) rotateX(90deg);
}
.bottom li{
background: cyan;
}
.bottom{
transform: translateY(150px) rotateX(-90deg);
}
@keyframes rotate {
0%{transform: rotateX(15deg) rotateY(20deg);}
25%{transform: translateZ(100px) rotateX(-75deg) rotateZ(20deg);}
50%{transform: translateX(150px) rotateX(100deg) rotateY(-120deg);}
75%{transform: rotateX(-95deg) rotateZ(60deg);}
100%{transform: rotateX(55deg) rotateY(20deg);}
}
</style>
</head>
<body>
<div class="wrap">
<ul class="before">
<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="after">
<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="left">
<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="right">
<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="top">
<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="bottom">
<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>
观赏型动态3D魔方
最新推荐文章于 2024-08-18 10:49:10 发布