HTML5——3D立方体旋转动画

「爱情、让人受尽委屈。」 2023-07-20 12:23 17阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70][]

代码如下：

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70]: /images/20230528/38ccb5dc24014f579ad440820e2dfbbd.png