纯HTML加CSS实现3D立体动态相册【超简单、附源码】

最新推荐文章于 2023-01-15 20:32:19 发布

huangfuyk

最新推荐文章于 2023-01-15 20:32:19 发布

阅读量2.3w

点赞数 113

分类专栏： CSS 文章标签： css html html5 前端 css3

本文链接：https://blog.csdn.net/weixin_42881768/article/details/105325781

版权

CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

近日，收到一男粉丝私信，具体如下：在这里插入图片描述
PS：在跟他聊天过程中，我不该笑的，哪个男同胞没有这么让人心疼的一刻呢。所以，在此祝愿他能早日哄好他的女朋友，加油，奥利给~~~

于是，在他的万般焦急等待下，为他量身定做的动态相册出炉了，鉴于时间紧任务重，实现的功能比较单一，但是他已经很满足了，我也很欣慰！

先来看一下效果：
在这里插入图片描述
具体代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>加油</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		
		.wrap{width: 600px;height: 400px;margin: 200px auto;}
		.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
		.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}
		
		.box img{width: 200px;height: 200px;}
		
		.left{transform: rotateY(90deg) translateZ(-100px);}
		.right{transform: rotateY(90deg) translateZ(100px);}
		.top{transform: rotateX(90deg) translateZ(100px);}
		.bottom{transform: rotateX(90deg) translateZ(-100px);}
		.after{transform: translateZ(-100px);}
		.before{transform: translateZ(100px);}
		
		.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
		.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
		.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
		.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
		.wrap .box:hover .after{transform: translateZ(-160px);}
		.wrap .box:hover .before{transform: translateZ(160px);}
		
		@keyframes move{
			from{transform: rotateX(0deg) rotateY(0deg);}
			to{transform: rotateX(13deg) rotateY(720deg);}
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<div class="left"><img src="img/01.jpg" alt=""></div>
			<div class="right"><img src="img/02.jpg" alt=""></div>
			<div class="top"><img src="img/03.jpg" alt=""></div>
			<div class="bottom"><img src="img/04.jpg" alt=""></div>
			<div class="after"><img src="img/05.jpg" alt=""></div>
			<div class="before"><img src="img/06.jpg" alt=""></div>
		</div>
	</div>
</body>
</html>

为了防止他运行不出来，我把整个HTML文件发给了他，并告知只需把图片换成他女朋友的照片就好咯~

在这里插入图片描述
结果当然是运行出来了，女朋友也原谅他了，紧接着…走上了人生巅峰~~~

在这里插入图片描述

huangfuyk

关注

113
点赞
踩
246

收藏

觉得还不错? 一键收藏
102
评论
纯HTML加CSS实现3D立体动态相册【超简单、附源码】

近日，收到一男粉丝私信，具体如下：PS：在跟他聊天过程中，我不该笑的，哪个男同胞没有这么让人心疼的一刻呢。所以，在此祝愿他能早日哄好他的女朋友，加油，奥利给~~~于是，在他的万般焦急等待下，为他量身定做的动态相册出炉了，鉴于时间紧任务重，实现的功能比较单一，但是他已经很满足了，我也很欣慰！先来看一下效果：具体代码如下：<!DOCTYPE html><html&gt...
复制链接

扫一扫