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

最新推荐文章于 2024-07-22 19:12:50 发布
最新推荐文章于 2024-07-22 19:12:50 发布
阅读量1.5w 收藏 114
点赞数 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
    点赞
  • 踩
  • 114
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
3D旋转相册制作
qq_43537987的博客
01-06 3万+
制作思路： 1.讲所需图片插入并使其定位在一起 &lt;img src="images/1.jpg" alt=""&gt;&lt;p&gt;&lt;/p&gt; &lt;img src="images/2.jpg" alt=""&gt;&lt;p&gt;&lt;/p&gt; &lt;img src="i
抖音3d旋转相册代码css-3d.rar
11-18
抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。
【炫酷前端】抖音很火的3d旋转相册
热门推荐
用心去做
11-18 1万+
效果：点我 准备12张图片，大小最好是正方形（尽量1:1，不然变形不好看），放到img文件夹中。 css文件夹：index.css html{ background: #000; height: 100%; } /*最外层容器样式*/ .wrap{ position: relative; position: absolute; top: 0; ...
CSS3的一些动画展示
最新发布
2401_86340568的博客
07-22 1275
1. 了解‘过渡’ 2D转换2. 案例1. 1当用户将鼠标悬停在类为.box元素的泡泡背景上时，背景图像的位置会发生变化，并且这种变化会在 2 秒内平滑过渡。背景图像在鼠标悬停时移动，给人一种动态的视觉体验。十分丝滑，且简单。这段代码的总体效果是，我们将鼠标悬停在页面的任意位置时，位于左下角的小火煎会平滑地移动到右上角并旋转30°，同时背景颜色保持不变。
抖音旋转相册制作详解（包含源代码html+css）
weixin_41721822的博客
11-24 1万+
大家好！ 制作旋转相册很简单，需要工具为：Windows的记事本即可：（如果有专业的HTML编辑工具会更方便）； 首先新建文件夹如：旋转相册实例；取题材，图片（分别命名号序列，之所以序列方便下面引入图片修改路径）； 我新建的目录如下：命名12张图片名称，其中：3.css和turn.html为接下来要实现的内容。 首先，图片准备好了，新建css样式文件。 *{ margin...
抖音很火的JavaScript旋转3D相册源码.zip
05-06
抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的Jav
❤ HTML+css3+js 抖音3d旋转相册 (撩妹,送女友都可以)
12-07
❤ (撩妹神器) HTML+css3+js 抖音3d旋转相册(生日送女友)，动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦
纯CSS 撩妹3D旋转相册
weixin_55288991的博客
07-05 225
先看完成效果 *原形态为几张图片为成两个正方形，大正方形包着小正方形然后自主的旋转 *鼠标移入后外层（大正方形）变大继续旋转 2.基本布局 *一个box里包含两个box 3.基本CSS *CSS3 transform属性：属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、 缩放、移动或倾斜 *CSS3 transform-style属性：使被转换的子元素保留其 3D 转换 ...
纯css实现炫酷抖音女友3D旋转相册特效.zip
11-09
【标题】"纯css实现炫酷抖音女友3D旋转相册特效"是一个关于前端开发的项目，主要利用CSS3技术来创建一个具有视觉吸引力的3D旋转相册效果，类似于在抖音上流行的女友照片展示方式。这个效果可以为网站增添互动性和...
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
这是一个使用纯CSS实现的旋转相册，通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器，其中包含多个img标签，每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d，...
3d旋转相册源码
12-16
3d旋转相册源码，用纯CSS3代码写的一个小案例，难度不大
抖音程序猿3D表白html相册（神器）.zip
12-20
程序员给女朋友用HTML5制作的3D相册，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。程序员发挥自己的专长，这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术，需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
3D相册源码
07-15
3d相册的例子，想了解学习android相册的朋友可以下载看看。
3D旋转相册
04-28
3D旋转相册
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧!
12-10
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧! (生日送女友)，动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦
CSS+HTML 3D相册
04-10
基于css，jquery，html的3D旋转相册，炫酷实用，有效。
实现3D旋转（源码）
YUZHIBOYI的专栏
05-30 1719
package yy.android.roate; import android.app.Activity; import android.os.Bundle; import java.util.concurrent.ThreadPoolExecutor.DiscardOldestPolicy; import android.app.Activity; import andr
3D翻转相册
qq_44109821的博客
12-24 217
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D翻转相册</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font: 14px "micr...
3D-旋转相册
qq_40014350的博客
01-07 1087
之前在抖音上看到的三维旋转相册很火，身边朋友问了很多，今天搞完在这里记录一下，活不多说上代码（图片是乱找的。。) HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D-旋转相册</title> <link...
纯css实现炫酷抖音女友3d旋转相册特效
05-11
实现炫酷抖音女友3D旋转相册特效，需要掌握CSS3的一些基本...这样就可以实现抖音女友3D旋转相册的特效了。通过使用CSS3的旋转、缩放、动画和过渡属性，可以轻松实现多种炫酷的效果，为网页添加生动、有趣的视觉体验。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值