CSS实现简单的3D旋转魔方

你的名字 2022-02-23 02:52 270阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    		body{
    			background: yellow;
    		}
    		/*最外层样式*/
    			.wrap{
    				width: 200px;
    				height 200px;
    				margin: 200px auto;
    				/*border: 1px solid red;*/
    				/*background: red;*/
    				position: relative;					
    			}
    			/*包裹所有容器的样式*/
    			.cube{
    				width: 200px;
    				height: 200px;
    				/*perspective: 500px;*/
    				/*保持3D效果*/
    				margin: 0 auto;
    				transform-style: preserve-3d;
    				transform: rotateX(-30deg) rotateY(-80deg);	
    				animation: rotate linear 10s infinite;	
    							
    			}
    				@-webkit-keyframes rotate{
    				from{
    					transform: rotateX(0deg) rotateY(0deg);
    				}
    				to{
    					transform: rotateX(360deg) rotateY(360deg);
    				}
    			}
    			.cube div{
    				position: absolute;
    				width: 200px;
    				height: 200px;
    				/*opacity: 0.8;*/
    				/*0.4秒*/
    				transition: all .4; 
    			}
    			/*定义所有图片的样式*/
    			.pic{
    				width: 200px;
    				height: 200px;				
    			}									
    			.cube .Out_Left{
    				transform: rotateY(-90deg) translateZ(100px);
    			}
    			.cube .Out_Right{
    				transform: rotateY(90deg) translateZ(100PX);
    			}
    			.cube .Out_Top{
    				transform: rotateX(90deg) translateZ(100px);
    			}
    			.cube .Out_Bottom{
    				transform: rotateX(-90deg) translateZ(100px);
    			}
    			.cube .Out_Front{
    				transform: rotateY(0deg) translateZ(100px);
    			}
    			.cube .Out_Back{			
    				transform: translateZ(-100px) rotateY(180deg);
    			}
    		
    			/*定义小正方体的样式*/
    			.cube span{
    				display: block;
    				width: 100px;
    				height: 100px;
    				position: absolute;
    				top: 50px;
    				left: 50px;
    			}
    			
    		 	.cube .in_pic{
    				width: 100px;
    				height: 100px;
    			}
    																
    			.cube .In_Left{
    				transform: rotateY(-90deg) translateZ(50px);
    			}
    			.cube .In_Right{
    				transform: rotateY(90deg) translateZ(50PX);
    			}
    			.cube .In_Top{
    				transform: rotateX(90deg) translateZ(50px);
    			}
    			.cube .In_Bottom{
    				transform: rotateX(-90deg) translateZ(50px);
    			}
    			.cube .In_Front{
    				transform: rotateY(0deg) translateZ(50px);
    			}
    			.cube .In_Back{			
    				transform: translateZ(-50PX) rotateY(180deg);
    			}
    			鼠标移入后的样式
    			.cube:hover .Out_Left{
    				transform: rotateY(90deg) translateZ(-200px);
    			}
    			.cube:hover .Out_Right{
    				transform: rotateY(-90deg) translateZ(-200PX);
    			}
    			.cube:hover .Out_Top{
    				transform: rotateX(-90deg) translateZ(-200px);
    			}
    			.cube:hover .Out_Bottom{
    				transform: rotateX(90deg) translateZ(-200px);
    			}
    			.cube:hover .Out_Front{
    				transform: translateZ(200PX);
    			}
    			.cube:hover .Out_Back{
    				transform: translateZ(-200PX);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<div class="cube">
    				
    				<div class="Out_Front">
    					<img src="img/Lol-01.jpg" class="pic"/>
    				</div>				
    				<div class="Out_Back">
    					<img src="img/Lol_02.jpg"  class="pic"/>
    				</div>	
    				<div class="Out_Top">
    					<img src="img/Lol_03.jpg"  class="pic"/>
    				</div>
    				<div class="Out_Bottom">
    					<img src="img/Lol_04.jpg"  class="pic"/>
    				</div>
    				<div class="Out_Left">
    					<img src="img/Lol_05.jpg"  class="pic"/>
    				</div>
    				<div class="Out_Right">
    					<img src="img/Lol-07.jpg"  class="pic"/>
    				</div>
    				
    				<span class="In_Front">
    					<img src="img/Lol_06.jpg" class="in_pic"/>					
    				</span>
    				<span class="In_Back">
    					<img src="img/Lol_06.jpg" class="in_pic"/></span>
    				<span class="In_Top">
    					<img src="img/Lol_06.jpg" class="in_pic"/>					
    				</span>
    				<span class="In_Bottom">
    					<img src="img/Lol_06.jpg" class="in_pic"/>
    				</span>
    				<span  class="In_Left">
    					<img src="img/Lol_06.jpg"  class="in_pic"/>
    				</span>
    				<span class="In_Right">
    					<img src="img/Lol_06.jpg" class="in_pic"/>
    				</span>			
    			</div>			
    		</div>
    	</body>
    </html>