抖音超火3D相册——魔方版（肖战壁纸图片）

最新推荐文章于 2021-06-04 08:01:40 发布

小童独家蛋炒饭

最新推荐文章于 2021-06-04 08:01:40 发布

阅读量8.2k

点赞数 10

文章标签： html5

本文链接：https://blog.csdn.net/Deardanuomi/article/details/103610040

版权

抖音超火3D相册——魔方版（肖战壁纸图片）

闲来无事，写了一个HTML5和CSS的肖战3D相册，以下奉上效果图和源代码。
（PS：鼠标触碰可以显示内层六面体照片，拖动图片可以保存图片至本地。）

效果图：在这里插入图片描述

源码：

<!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/1.jpg" class="pic"/>
				</div>				
				<div class="Out_Back">
					<img src="img/2.jpg"  class="pic"/>
				</div>	
				<div class="Out_Top">
					<img src="img/3.jpg"  class="pic"/>
				</div>
				<div class="Out_Bottom">
					<img src="img/4.jpg"  class="pic"/>
				</div>
				<div class="Out_Left">
					<img src="img/5.jpg"  class="pic"/>
				</div>
				<div class="Out_Right">
					<img src="img/7.jpg"  class="pic"/>
				</div>
				
				<span class="In_Front">
					<img src="img/6.jpg" class="in_pic"/>					
				</span>
				<span class="In_Back">
					<img src="img/6.jpg" class="in_pic"/></span>
				<span class="In_Top">
					<img src="img/6.jpg" class="in_pic"/>					
				</span>
				<span class="In_Bottom">
					<img src="img/6.jpg" class="in_pic"/>
				</span>
				<span  class="In_Left">
					<img src="img/6.jpg"  class="in_pic"/>
				</span>
				<span class="In_Right">
					<img src="img/6.jpg" class="in_pic"/>
				</span>			
			</div>			
		</div>
	</body>
</html>

小童独家蛋炒饭

关注

10
点赞
踩
45

收藏

觉得还不错? 一键收藏
8
评论
抖音超火3D相册——魔方版（肖战壁纸图片）

抖音超火3D相册——魔方版（肖战壁纸图片）闲来无事，写了一个HTML5和CSS的肖战3D相册，以下奉上效果图和源代码。（PS：鼠标触碰可以显示内层六面体照片，拖动图片可以保存图片至本地。）效果图：源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫