HTML5 纯CSS3实现正方体旋转3D效果

Love The Way You Lie 2022-12-24 10:50 276阅读 0赞

## 实现效果： ##

![20201127184938505.gif][]

## 实现代码： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#aa{
    				margin: 100px auto;
    				width: 200px;
    				height: 200px;
    				transform-style: preserve-3d;
    				position: relative;
    				transform: rotateX(-15deg) rotateY(45deg);
    				animation: name 6s linear 100ms infinite;
    			}
    			.bb{
    				position: absolute;
    				width: 100px;
    				height: 100px;
    				left: 0;
    				right: 0;
    				background-color: rgba(232,222,45,0.6);
    			}
    			.qian{
    				transform: translateZ(50px);
    				background-color: rgba(23,22,4,0.6);
    			}
    			.hou{
    				transform: translateZ(-50px);
    				background-color: rgba(23,122,56,0.6);
    			}
    			.zuo{
    				transform: rotateY(270deg) translateZ(-50px);
    				background-color: rgba(223,122,74,0.6);
    				
    			}
    			.you{
    				transform: rotateY(270deg) translateZ(50px);
    				background-color: rgba(13,22,254,0.6);
    			}
    			.shang{
    				transform: rotateX(270deg) translateZ(-50px);
    				background-color: rgba(223,12,144,0.9);
    			}
    			.xia{
    				transform: rotateX(270deg) translateZ(50px);
    				background-color: rgba(23,252,144,0.6);
    			}
    			@keyframes name{
    				from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
    				to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
    			}
    		</style>
    	</head>
    	<body>
    		<div id="aa">
    			<div class="bb  qian"></div>
    			<div class="bb  hou"></div>
    			<div class="bb  zuo"></div>
    			<div class="bb  you"></div>
    			<div class="bb  shang"></div>
    			<div class="bb  xia"></div>
    		</div>
    	</body>
    </html>

[20201127184938505.gif]: /images/20221120/a0f9064ac2bb46f0890d17c07f45c8e2.png