3D旋转立方体相册

淩亂°似流年 2023-10-03 14:05 3阅读 0赞

#### 目录 ####

*   *   *  一、实现效果
         *  二、图片素材
         *  三、代码

#### 一、实现效果 ####

> 点击下面六个小的图片，上面的立方体会旋转并切换成对应的图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]

> 关注一下，不要下次一定呦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 1]

#### 二、图片素材 ####

> 6张 300\*300

![请添加图片描述][fc313871ee3e4a298f46b35ea8e7af94.jpg]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 2]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 3]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 4]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 5]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 6]

> 6张 100\*100

![请添加图片描述][b7d561c7b21e4f31bfda30a04303adf0.jpg]  
![请添加图片描述][1c7f32f02a1548c49334e82c4415130c.jpg]  
![请添加图片描述][106a2b66256549be952a6cf23cda6c8f.jpg]  
![请添加图片描述][5b5365eefd384b2f9579347a22318f38.jpg]  
![请添加图片描述][1b9cb09cf57749b9be09036cfdf8f9ca.jpg]  
![请添加图片描述][645939952c004fb9a271c924c4ef88f9.jpg]

#### 三、代码 ####

*  1、index.html

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>3D立方体相框</title>
    
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/style.css">
    
    
    </head>
    
    <body>
    
    <div class="cube-container">
    
    	<div class="cube initial-position">
    
    		<img class="cube-face-image image-1" src="images/11.jpg">
    		
    		<img class="cube-face-image image-2" src="images/21.jpg">
    		
    		<img class="cube-face-image image-3" src="images/31.jpg">
    		
    		<img class="cube-face-image image-4" src="images/41.jpg">
    		
    		<img class="cube-face-image image-5" src="images/51.jpg">
    		
    		<img class="cube-face-image image-6" src="images/61.jpg">
    
    	</div>
    
    </div>
    
    <div class="image-buttons">
    
    	<input type="image" class="show-image-1" src="images/12.jpg"></input>
    
    	<input type="image" class="show-image-2" src="images/22.jpg"></input>
    
    	<input type="image" class="show-image-3" src="images/32.jpg"></input>
    
    	<input type="image" class="show-image-4" src="images/42.jpg"></input>
    
    	<input type="image" class="show-image-5" src="images/52.jpg"></input>
    
    	<input type="image" class="show-image-6" src="images/62.jpg"></input>
    
    </div>
      
    
    <script  src="js/index.js"></script>
    
    </body>
    </html>

*  2、index.js

//DOM load event
    window.addEventListener("DOMContentLoaded", function () {
        
    
    	var cube = document.querySelector(".cube"),
    	    imageButtons = document.querySelector(".image-buttons");
    	var cubeImageClass = cube.classList[1];
    
    	//Add click event listener to image buttons container
    	imageButtons.addEventListener("click", function (e) {
        
    
    		//Get node type and class value of clicked element
    		var targetNode = e.target.nodeName,
    		    targetClass = e.target.className;
    
    		//Check if image input has been clicked and isn't the currently shown image
    		if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
        
    
    			console.log("Show Image: " + targetClass.charAt(11));
    
    			//Replace previous cube image class with new class
    			cube.classList.replace(cubeImageClass, targetClass);
    
    			//Update cube image class variable with new class
    			cubeImageClass = targetClass;
    		}
    	});
    });

*  3、style.css

/*
    
    Full-page view:
    
    https://codepen.io/GeorgePark/full/gegavO/
    
    */
    
    @import url(https://fonts.googleapis.com/css?family=Montserrat:500);
    
    :root {
        
    	/* Base font size */
    	font-size: 10px;
    
    	/* Border color variable */
    	--border-color: #e70;
    }
    
    * {
        
    	box-sizing: border-box;
    }
    
    body {
        
    	font-family: "Montserrat", Arial, sans-serif;
    	font-weight: 500;
    	line-height: 1.5;
    	text-align: center;
    	min-height: 100vh;
    	padding: 4rem 2rem;
    	color: #fafafa;
    	background-color: #080808;
    }
    
    h1 {
        
    	font-size: 4rem;
    }
    
    h2 {
        
    	font-size: 2rem;
    	margin-bottom: 2.5rem;
    }
    
    .cube-container {
        
    	position: relative;
    	width: 30rem;
    	height: 30rem;
    	margin: 5rem auto 6rem;
    	perspective: 100rem;
    }
    
    .cube {
        
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	transform-style: preserve-3d;
    	transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
    }
    
    .cube-face-image {
        
    	display: block;
    	position: absolute;
    	/* opacity: 0.95; */
    	/* border: 0.2rem solid #fafafa; */
    	box-shadow: 0 0 0.5rem #fff, 
    				0 0 1.5rem var(--border-color),
    				0 0 3rem var(--border-color);
    }
    
    .image-buttons {
        
    	display: grid;
    	grid-template-columns: repeat(3, auto);
    	grid-gap: 1.5rem;
    	justify-content: center;
    }
    
    .image-buttons input {
        
    	border: 0.2rem solid #fafafa;
    }
    
    .image-buttons input:focus {
        
    	outline: none;
    	border: 0.2rem solid var(--border-color);
    }
    
    /* Transform images to create cube */
    
    .image-1 {
        
    	transform: translateZ(15rem);
    }
    
    .image-2 {
        
    	transform: rotateX(-180deg) translateZ(15rem);
    }
    
    .image-3 {
        
    	transform: rotateY(90deg) translateZ(15rem);
    }
    
    .image-4 {
        
    	transform: rotateY(-90deg) translateZ(15rem);
    }
    
    .image-5 {
        
    	transform: rotateX(90deg) translateZ(15rem);
    }
    
    .image-6 {
        
    	transform: rotateX(-90deg) translateZ(15rem);
    }
    
    /* Transform cube to show correct image */
    
    .cube.initial-position {
        
    	transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
    }
    
    .cube.show-image-1 {
        
    	transform: translateZ(-15rem);
    }
    
    .cube.show-image-2 {
        
    	transform: translateZ(-15rem) rotateX(180deg);
    }
    
    .cube.show-image-3 {
        
    	transform: translateZ(-15rem) rotateY(-90deg);
    }
    
    .cube.show-image-4 {
        
    	transform: translateZ(-15rem) rotateY(90deg);
    }
    
    .cube.show-image-5 {
        
    	transform: translateZ(-15rem) rotateX(-90deg);
    }
    
    .cube.show-image-6 {
        
    	transform: translateZ(-15rem) rotateX(90deg);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/31f015ae357546d2802c660156ddc314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/0dceb2ca8d3643e98922b62868a44518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[fc313871ee3e4a298f46b35ea8e7af94.jpg]: https://img-blog.csdnimg.cn/fc313871ee3e4a298f46b35ea8e7af94.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/290c12a0a04a4a68852e1a37904be183.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/b8206fde9be04606abf4e1fc75fe83f8.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/febeafb10c6e4c6e97c78c2f9931676a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/f5a595c14c034b0aad656a62b4100754.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/4443e96173f94b4596a3e008a400cbd5.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[b7d561c7b21e4f31bfda30a04303adf0.jpg]: https://img-blog.csdnimg.cn/b7d561c7b21e4f31bfda30a04303adf0.jpg
[1c7f32f02a1548c49334e82c4415130c.jpg]: https://img-blog.csdnimg.cn/1c7f32f02a1548c49334e82c4415130c.jpg
[106a2b66256549be952a6cf23cda6c8f.jpg]: https://img-blog.csdnimg.cn/106a2b66256549be952a6cf23cda6c8f.jpg
[5b5365eefd384b2f9579347a22318f38.jpg]: https://img-blog.csdnimg.cn/5b5365eefd384b2f9579347a22318f38.jpg
[1b9cb09cf57749b9be09036cfdf8f9ca.jpg]: https://img-blog.csdnimg.cn/1b9cb09cf57749b9be09036cfdf8f9ca.jpg
[645939952c004fb9a271c924c4ef88f9.jpg]: https://img-blog.csdnimg.cn/645939952c004fb9a271c924c4ef88f9.jpg