效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于CSS3的3D立方体旋转动画又一版本</title>
<style >
*{box-sizing: border-box; }
html{
background: radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
height: 100%;
}
body{
width: 20em;
height: 20em;
left: 50%;
margin-left: -10em;
margin-top: -10em;
perspective: 1000px;
position: absolute;
top: 50%;
}
#cube{
animation: 6s spin linear infinite;
height: 100%;
position: absolute;
transform-style: preserve-3d;
width: 100%;
}
#cube *{
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
background-size: 2.5em 2.5em, 2.5em 2.5em;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid rgba(54, 226, 248, 0.5);
box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
display: block;
height: 20em;
position: absolute;
width: 20em;
}
#cube *:before{
background: radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
content: '';
height: 100%;
position: absolute;
width: 100%;
}
#back{transform: rotateX(180deg) translateZ(10em);}
#front{transform: rotateY(0deg) translateZ(10em);}
#bottom{transform: rotateX(-90deg) translateZ(10em);}
#left{transform: rotateY(-90deg) translateZ(10em);}
#right{transform: rotateY(90deg) translateZ(10em);}
#top{transform: rotateX(90deg) translateZ(10em); }
@keyframes spin{
0%{ transform: translateZ(-10em) rotateX(0) rotateY(0deg);}
100%{transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);}
}
</style>
</head>
<body>
<ul id="cube">
<li id="back"></li>
<li id="bottom"></li>
<li id="front"></li>
<li id="left"></li>
<li id=right"></li>
<li id="top"></li>
</ul>
</body>
</html>