纯CSS实现抖音3D酷炫旋转相册

最新推荐文章于 2023-04-19 09:59:03 发布
最新推荐文章于 2023-04-19 09:59:03 发布
阅读量1.5w 收藏 113
点赞数 25
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Charles_Tian/article/details/102798769
版权

序言

最近在抖音上看到了一个酷炫3D旋转相册表白效果，博主我表示很是艳羡呐！而且博主也是做前端的，表示不能输给抖音上的小姐姐，于是我就自学了下CSS3的一些动画属性并实现了类似效果，现在分享给大家。

先上效果，免得没有动力去学习去实践！
另外项目源码可去我的github仓库去clone：https://github.com/CharlesTian07/3D-rotate-album，喜欢的话请star一下噢~

3D酷炫旋转相册

升级作品gif图：

 1. 准备工作

1）下载轻量级编辑器sublime text3或者vs code
2）准备好8张（最好长方形）或者12张（最好正方形）照片素材（尺寸保持一致）

2.编码工作（以12张长方形照片为例）

1）HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS3 3D动画相册</title>
    </head>
	<body>
		<div class="wrapper">
			<ul class="min-box">
				<li class="img1"></li>
				<li class="img2"></li>
				<li class="img3"></li>
				<li class="img4"></li>
				<li class="img5"></li>
				<li class="img6"></li>
			</ul>

			<ul class="max-box">
				<li class="img1"></li>
				<li class="img2"></li>
				<li class="img3"></li>
				<li class="img4"></li>
				<li class="img5"></li>
				<li class="img6"></li>
			</ul>
		</div>
	</body>
</html>

2）CSS部分：

            * {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			body {
				perspective: 5000px;
			}
			.wrapper {
				perspective: 5000px;
				-webkit-transform: rotateX(15deg);
				-moz-transform: rotateX(15deg);
				transform: rotateX(15deg);
				transform-style: preserve-3d;
			}
			.min-box {
				position: relative;
				width: 405px;
				height: 270px;
				margin: 360px auto;
				transform-style: preserve-3d;
				-webkit-animation: rotate1 6s linear infinite;
				-moz-animation: rotate1 6s linear infinite;
				animation: rotate1 6s linear infinite;
			}
			.max-box {
				position: absolute;
				width: 102px;
				height: 68px;
				left: 50%;
				top: 50%;
				margin-left: -51px;
				margin-top: -34px;
				transform-style: preserve-3d;
				-webkit-animation: rotate2 6s linear infinite;
				-moz-animation: rotate2 6s linear infinite;
				animation: rotate2 6s linear infinite;
			}
			.min-box li {
				width: 405px;
				height: 270px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.9;
			}
			.max-box li {
				width: 102px;
				height: 68px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.min-box .img1 {
				background-image: url('images/supercar1.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:translateZ(360px);
				-moz-transform:translateZ(360px);
				transform:translateZ(360px);
				animation: img1 1s linear;
			}
			.min-box .img2 {
				background-image: url('images/supercar2.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(90deg) translateZ(360px);
				-moz-transform:rotateY(90deg) translateZ(360px);
				transform:rotateY(90deg) translateZ(360px);
				animation: img2 1s linear;
			}
			.min-box .img3 {
				background-image: url('images/supercar3.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(180deg) translateZ(360px);
				-moz-transform:rotateY(180deg) translateZ(360px);
				transform:rotateY(180deg) translateZ(360px);
				animation: img3 1s linear;
			}
			.min-box .img4 {
				background-image: url('images/supercar4.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(270deg) translateZ(360px);
				-moz-transform:rotateY(270deg) translateZ(360px);
				transform:rotateY(270deg) translateZ(360px);
				animation: img4 1s linear;
			}
			.min-box .img5 {
				background-image: url('images/supercar5.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(90deg) translateZ(300px);
				-moz-transform:rotateX(90deg) translateZ(300px);
				transform:rotateX(90deg) translateZ(300px);
				animation: img5 1s linear;
			}
			.min-box .img6 {
				background-image: url('images/supercar6.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(450deg) translateZ(-300px);
				-moz-transform:rotateX(450deg) translateZ(-300px);
				transform:rotateX(450deg) translateZ(-300px);
				animation: img6 1s linear;
			}
			.max-box .img1 {
				background-image: url('images/supercar7.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:translateZ(51px);
				-moz-transform:translateZ(51px);
				transform:translateZ(51px);
			}
			.max-box .img2 {
				background-image: url('images/supercar8.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(90deg) translateZ(51px);
				-moz-transform:rotateY(90deg) translateZ(51px);
				transform:rotateY(90deg) translateZ(51px);
			}
			.max-box .img3 {
				background-image: url('images/supercar9.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(180deg) translateZ(51px);
				-moz-transform:rotateY(180deg) translateZ(51px);
				transform:rotateY(180deg) translateZ(51px);
			}
			.max-box .img4 {
				background-image: url('images/supercar10.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(270deg) translateZ(51px);
				-moz-transform:rotateY(270deg) translateZ(51px);
				transform:rotateY(270deg) translateZ(51px);
			}
			.max-box .img5 {
				background-image: url('images/supercar11.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(90deg) translateZ(34px);
				-moz-transform:rotateX(90deg) translateZ(34px);
				transform:rotateX(90deg) translateZ(34px);
			}
			.max-box .img6 {
				background-image: url('images/supercar12.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(450deg) translateZ(-34px);
				-moz-transform:rotateX(450deg) translateZ(-34px);
				transform:rotateX(450deg) translateZ(-34px);
			}
			@-moz-keyframes rotate1 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-webkit-keyframes rotate1 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-moz-keyframes rotate2 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-webkit-keyframes rotate2 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@keyframes img1 {
				0% {
					-webkit-transform:translateZ(180px) scale(0.25, 0.25);
					-moz-transform:translateZ(180px) scale(0.25, 0.25);
					transform:translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:translateZ(360px) scale(1, 1);
					-moz-transform:translateZ(360px) scale(1, 1);
					transform:translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img2 {
				0% {
					-webkit-transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					-moz-transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img3 {
				0% {
					-webkit-transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					-moz-transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img4 {
				0% {
					-webkit-transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					-moz-transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img5 {
				0% {
					-webkit-transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					-moz-transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					-moz-transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img6 {
				0% {
					-webkit-transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					-moz-transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					-moz-transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					opacity: 0.9;
				}
			}

3.编码解释

主要用到transform和animation两个属性，可分别查看链接学习：
transform：https://www.runoob.com/cssref/css3-pr-transform.html
animation：https://www.runoob.com/cssref/css3-pr-animation.html

1）要选一个元素作为整个旋转的轴承，以效果中的大盒子为例：

大盒子是以class=max-box这个div为轴承的，且这个div是没有给予其任何颜色上的显示的，但它确实存在于dom中，且具有一定宽高，其他的六张图片根据其所在位置，分别分布在其六个面；

其中四个面（前后左右）在Y轴上分别进行0°、90°、180°、270°进行翻转（rotate()），在Z轴上进行像素偏移360；

上下两个面需要在X轴上分别进行90°和450°（或者-90°）翻转，在Z轴上进行像素偏移300；

这样就形成了六面的格局

2）为了初始更好的视觉效果，在初始时刻，为六个大的图片分别增加了一个动画：由小变大、由浅变深，这个效果比较容易实现，这里不再赘述。

3）主要的难点是要怎么才能实现3D渲染，有两个重要属性：

①transform-style：https://www.runoob.com/cssref/css3-pr-transform-style.html

②perspective：https://www.runoob.com/cssref/css3-pr-transform.html

Charles_Tian
关注
  • 25
    点赞
  • 踩
  • 113
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
抖音很火的3d旋转相册（修改了尺寸版）
12-23
下载打开index.html即可，博客地址: https://blog.csdn.net/qq_30750609/article/details/103115598
抖音上很火的3D立体动态相册实现代码!
cs007711的博客
09-08 3086
今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。
3D立体相册模板（大小可更改）
m0_53602804的博客
04-21 397
3D立体相册代码模板
小炫酷的3D旋转立方体相册
Jan_ge的博客
02-29 1227
小炫酷的3D旋转立方体相册 前言 今年是特别的一年，是特别宅的一年，大家都宅在家做贡献。在这个逆战时期，让我们发挥逆战精神，一起来敲代码吧！ 正文 今天，我们来做一个有点小炫酷的3D旋转立方体相册。那么首先，让我们来了解一下3D。 3D（立体空间） 属性： perspective 景深（近大远小），是观察物体的一个视角距离，距离越小效果越明显，它的数值一般为900px-1200px。 使用方法：...
3D旋转相册
明思齐的博客
03-03 166
背景该3D旋转相册项目是基于eclipse工具开发的，其创建的是一个JavaWeb项目。操作步骤。
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧!
12-10
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧! (生日送女友)，动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦
教你零基础制作3D旋转相册（送给那个她~）
ChrisPhantom的博客
03-08 1万+
3D立体相册 　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？ 　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D旋转效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！
国内的几款强大的智能—AI语言模型
热门推荐
weixin_42636075的博客
04-19 67万+
强大的智能AI语言模型
MySQL学生综合测评系统_大学生综合测评系统的设计和实现(MySQL)
weixin_42234804的博客
01-19 2986
大学生综合测评系统的设计和实现(MySQL)(任务书,开题报告,中期检查表,毕业论文20000字,程序代码,数据库)摘 要本文详细介绍了本系统设计的基本方法、系统的需求分析、系统的架构设计和系统实现部分，以及对系统中用到的技术进行相关的介绍，对具体的模块进行相应的思路分析，并在重要部分提供相关代码进行阐释。本系统设计的是大学生综合测评系统，主要包括学生用户和管理员用户两个大模块。采用的是B/S体...
(附源码)计算机毕业设计ssm高校学生综合素质测评系统
bushe902的博客
10-12 2201
项目运行环境配置：（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可4.
抖音程序猿3D表白html相册（神器）.zip
12-20
程序员给女朋友用HTML5制作的3D相册，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。程序员发挥自己的专长，这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术，需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
抖音很火的立方体相册.zip
12-04
最近抖音很火的立方体相册来啦！本资源包含了CSS文件，img，JS，下载后可以直接打开页面就能看到效果，你也可以替换成自己的照片，修改里面的样式。里面有详细的注释，它将会是你学习的好资源也是撩妹的好技能。
程序员给女朋友用HTML5制作的3D相册
04-21
程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮，自己分析了一下。 整理里一个自己可以换相片
一个很棒的黑色炫酷相册JQuery
09-06
一个绝对让你下载了就不后悔的JQUERY特效的相册
用C语言绘制五角星，并让其旋转。
07-03
用C#绘制五角星，并让其旋转。包括绘制五角星函数和旋转函数。
纯css实现炫酷抖音女友3D旋转相册特效.zip
11-09
纯css实现炫酷抖音女友3D旋转相册特效.zip
抖音3d旋转相册代码css-3d.rar
11-18
抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。
纯CSS实现超酷炫3D圣诞树效果
最新发布
12-25
纯CSS+HTML实现的圣诞树动画效果 3D效果 代码简单易懂 学习与实用的不二之选 包含旋转效果，带光晕，底部带阴影效果，还有星光点缀其间，场景梦幻，代码简单，小白也能看的懂，老鸟也能有启发，快快下载体验吧！ ...
纯CSS3实现3D旋转书本效果
09-27
而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用，接下来通过本文给大家介绍CSS3实现3D旋转书本效果，需要的朋友一起学习
纯css实现炫酷抖音女友3d旋转相册特效
05-11
实现炫酷抖音女友3D旋转相册特效，需要掌握CSS3的一些基本动画和转换属性。首先需要准备照片，然后将照片放在一个容器中，设置容器的宽度、高度、视距、景深。接下来，需要使用CSS3的旋转属性将照片进行旋转，同时使用缩放属性进行3D效果的实现。最后再使用CSS3的动画属性和过渡属性，使照片在旋转的过程中呈现出平滑、连贯的效果。具体实现步骤和样式代码如下所示： 1. 创建一个容器，设置容器的宽度、高度、视距和景深。 ``` .container { width: 600px; height: 400px; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } ``` 2. 在容器中添加多个照片，将它们定位在正中心，并设置它们的宽度和高度。 ``` .photo { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; width: 400px; height: 300px; background-size: cover; background-position: center center; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } ``` 3. 使用CSS3的旋转属性，使照片在Z轴上进行旋转，并使用缩放属性使照片产生3D效果。 ``` .photo:nth-child(1) { transform: rotateY(0deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(0deg) translateZ(250px) scale(0.8); } .photo:nth-child(2) { transform: rotateY(60deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(60deg) translateZ(250px) scale(0.8); } .photo:nth-child(3) { transform: rotateY(120deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(120deg) translateZ(250px) scale(0.8); } .photo:nth-child(4) { transform: rotateY(180deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(180deg) translateZ(250px) scale(0.8); } .photo:nth-child(5) { transform: rotateY(240deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(240deg) translateZ(250px) scale(0.8); } .photo:nth-child(6) { transform: rotateY(300deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(300deg) translateZ(250px) scale(0.8); } ``` 4. 使用CSS3的动画属性和过渡属性，使照片具有平滑、连贯的旋转效果。 ``` .photo:hover { animation: rotate 10s infinite linear; -webkit-animation: rotate 10s infinite linear; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); } } ``` 这样就可以实现抖音女友3D旋转相册的特效了。通过使用CSS3的旋转、缩放、动画和过渡属性，可以轻松实现多种炫酷的效果，为网页添加生动、有趣的视觉体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值