js和css3实现动态魔方的效果

我会带着你远行 2023-10-11 16:27 49阅读 0赞

#### js和css3实现动态魔方的效果 ####

*  实现效果
 *  实现代码

## 实现效果 ##

*  静态效果

![在这里插入图片描述][57678abcf6e1416cbe3e87a59647f1bc.png]

*  动态效果

![在这里插入图片描述][495e4fe8d562460da4d6dcbd3a0d796d.png]

## 实现代码 ##

*  思路

**1.构建静态魔方**

首先设置css属性transform-style为preserve-3d，让元素位于3d空间中。然后使用css3中的平移和旋转对每个面分别操作来构建出立体魔方，最后使用js来给每个面设置背景图（注意：魔方用到的6张图片都存放在img目录下，并且需要统一命名为a0,a1…a5，方便遍历）。  
**2.动态魔方**  
使用css3的animation设置动画。

*  完整代码

<!DOCTYPE html>
    <html>
    <head>
    	<title>魔方</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{
          
    			margin: 0;
    			padding: 0;
    		}
    		body{
          
    		  width: 100%;
    		  height: 100%;
    		  background: radial-gradient(#fff, red); 
    		}
    		.container{
          
    			width:300px;
    			height:300px;
    			margin:200px auto;
    			perspective:20000px;
    		}
    		.box{
          
    			width:300px;
    			height:300px;
    			border:1px solid transparent;
    			box-sizing: border-box;
    			position:relative;
    			transform-style:preserve-3d;
    			/*transform:rotateX(30deg) rotateY(30deg);*/
    			animation: rotate 10s linear infinite;
    		}
    		@keyframes rotate{
          
    			100%{
          
    				transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
    			}
    		}
    
    		.box-page{
          
    			width: 300px;
    			height: 300px;
    			position:absolute;
    			box-sizing: border-box;
    			transform-style:preserve-3d;
    		}
    
    
    		.top{
          
    			transform: translateZ(150px);
    		}
    		.bottom{
          
    			transform: translateZ(-150px) rotateX(180deg);
    		}
    		.right{
          
    			transform: translateX(150px) rotateY(90deg);
    		}
    		.left{
          
    			transform: translateX(-150px) rotateY(-90deg);
    		}
    		.after{
          
    			transform: translateY(-150px) rotateX(90deg);
    		}
    		.before{
          
    			transform: translateY(150px) rotateX(-90deg);
    		}
    
    
    		.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
          
    			transform: rotateY(0deg);
    		    animation: rotatey 6s linear infinite;
    		}
    
    
    		@keyframes rotatey{
          
    			20%{
          
    				transform: rotateY(0deg);
    				background-size: 300px 300px;
    			}
    			40%{
          
    				/*background-image: url("img/img.jpg");*/
    				transform: rotateY(540deg);
    				background-size: 100px 100px;
    			}
    			60%{
          
    				/*background-image: url("img/img.jpg");*/
    				transform: rotateY(540deg);
    				background-size: 100px 100px;
    			}
    			80%{
          
    				transform: rotateY(0deg);
    				background-size:300px 300px;
    			}
    		}
    
    		.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
          
    			transform:rotateX(0deg);
    		    animation: rotatex 6s linear infinite;
    		}
    
    		@keyframes rotatex{
          
    			20%{
          
    				transform: rotateX(0deg);
    				background-size: 300px 300px;
    			}
    			40%{
          
    				/*background-image: url("img/img.jpg");*/
    				transform: rotateX(540deg);
    				background-size: 100px 100px;
    			}
    			60%{
          
    				/*background-image: url("img/img.jpg");*/
    				transform: rotateX(540deg);
    				background-size: 100px 100px;
    			}
    			80%{
          
    				transform: rotateX(0deg);
    				background-size: 300px 300px;
    			}
    		}
    		
    	</style>
    </head>
    <body>
    <div class="container">
    	<div class="box">
    		<div class="top box-page"></div>
    		<div class="bottom box-page"></div>
    		<div class="left box-page"></div>
    		<div class="right box-page"></div>
    		<div class="before box-page"></div>
    		<div class="after box-page"></div>
    	</div>
    </div>
    <script type="text/javascript">
    	
    	var arr = document.querySelectorAll(".box>div");
    	for(var n = 0;n<arr.length;n++){
          
    		for(var i=0;i<3;i++){
          
    			for(var j=0;j<3;j++){
          
    				var divs = document.createElement("div");
    				divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";
    				arr[n].appendChild(divs);
    
    				// 改变每一个div的位置
    				divs.style.left = 100*j+"px";
    				divs.style.top = 100*i+"px";
    
    				// 改变背景图相应的位置
    				divs.style.backgroundPositionX = -j*100+"px";
    				divs.style.backgroundPositionY = -i*100+"px";		
    			}
    		}
    	}
    
    </script>
    </body>
    </html>

[57678abcf6e1416cbe3e87a59647f1bc.png]: https://img-blog.csdnimg.cn/57678abcf6e1416cbe3e87a59647f1bc.png
[495e4fe8d562460da4d6dcbd3a0d796d.png]: https://img-blog.csdnimg.cn/495e4fe8d562460da4d6dcbd3a0d796d.png