老师给的,为了防丢放这上面。
<!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),