抖音上很火的3D立体动态相册实现代码！赶快学起来吧

言：

圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。

正文：

一、新建一个index.html的文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

二、css样式的代码

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

三、文件的目录结构，把css文件放到css文件夹里，图片放到img文件夹里。

四、图片尺寸不会修改的，可以选择使用美图秀秀网页版很简单

五、容易出现的问题，图片展示不全或展示的方向不对

1.图片尺寸需要修改（解决展示不全的情况）

上图是我的图片文件夹里放的图片，首先01-06编号命名的图片尺寸是100x100px的大小的，1-6编号是400x400px，如果效果想展示最佳，100x100px的图片是以头部特写的照片最好，因为01-06是立体照片内部小正方体的照片，1-6编号是外部正方体的照片。

2.图片的方向需要修改（解决头朝下的问题）

修改的方向如上图展示所示，比如第三张头就应该朝下，否则形成的效果图像会出现头是倒着的情况。

六、放一下动态效果图

总结：

生活虽然总有辛酸，但是我们不应该减少去创造生活的乐趣，不断寻找属于自己的那份快乐，才应该是我们生活的态度。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

原文链接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883

言

首先介绍下在本文出现的几个比较重要的概念：

函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息参考。
Fun: Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档参考。
fun install: fun install 是 fun 工具的一个子命令，用于安装 pip 和 apt 依赖，提供了命令行接口和 fun.yml 描述文件两种形式。

备注: 本文介绍的技巧需要 Fun 版本大于等于 2.9.3。

依赖工具

本项目是在 MacOS 下开发的，涉及到的工具是平台无关的，对于 Linux 和 Windows 桌面系统应该也同样适用。在开始本例之前请确保如下工具已经正确的安装，更新到最新版本，并进行正确的配置。

Docker
Fun
Fcli

Fun 和 Fcli 工具依赖于 docker 来模拟本地环境。

对于 MacOS 用户可以使用 homebrew 进行安装：

brew cask install docker
brew tap vangie/formula
brew install fun
brew install fcli

Windows 和 Linux 用户安装请参考：

https://github.com/aliyun/fun/blob/master/docs/usage/installation.md
https://github.com/aliyun/fcli/releases

安装好后，记得先执行 fun config 初始化一下配置。

初始化

使用 fun init 命令可以快捷的将本模板项目初始化到本地。

$ fun init vangie/puppeteer-example
? Please input oss bucket to upload chrome shell? chrome-headless
? Please select a region? cn-hangzhou
? Please input oss accessKeyId for upload? xxxxxxxxxxxKbBS
? Please input oss accessKeySecret for upload? xxxxxxxxxxxx5ZgM

上面会提示

输入一个 OSS 的 BUCKET，注意 OSS Bucket 是全球唯一的，上面的 chrome-headless 已经被占用了，请换一个新的名称或者一个已经创建好的（已经创建好的，请确保 region 一致）。
然后选择一个 OSS 的 Region，请保持和部署函数计算 Region 一致
输入一个具备 OSS 写权限的秘钥。

安装依赖

$ fun install
skip pulling image aliyunfc/runtime-nodejs8:build-1.2.0...
Task=> [UNNAMED]=> apt-get update (if need)=> apt-get install -y -d -o=dir::cache=/code/.fun/tmp libnss3=> bash -c 'for f in $(ls /code/.fun/tmp/archives/*.deb); do dpkg -x $f /code/.fun/root; done;'=> bash -c 'rm -rf /code/.fun/tmp/archives'
Task=> [UNNAMED]=> bash -c 'curl -L https://github.com/muxiangqiu/puppeteer-fc-starter-kit/raw/master/chrome/headless_shell.tar.gz --output headless_shell.tar.gz'
...

fun install 会执行 fun.yml 文件里的任务，这些任务会：

安装 puppeteer 依赖的 .so 文件；
将 puppeteer 依赖的 chrome headless 二进制文件上传到 OSS；
安装 npm 依赖。

部署

$ fun deploy
using region: cn-shanghai
using accountId: ***********4733
using accessKeyId: ***********KbBS
using timeout: 60
Waiting for service puppeteer to be deployed...
 Waiting for function html2png to be deployed...
 Waiting for packaging function html2png code...
 package function html2png code done
 function html2png deploy success
service puppeteer deploy success

执行

$ fcli function invoke -s puppeteer -f html2png
The screenshot has been uploaded to http://chrome-headless.oss-cn-shanghai.aliyuncs.com/screenshot.png

打开上面的返回链接，看到截取出来的是全屏滚动的长图，考虑的篇幅下面只截取了部分：

如果想换一个网址，可以使用如下命令格式

fcli function invoke -s puppeteer -f html2png --event-str 'http://www.alibaba.com'

调试

如果需要在本地调试代码，可以使用如下命令

fun local invoke html2png <<<'http://www.alibaba.com'

参考阅读

三分钟学会如何在函数计算中使用 puppeteer

作者：倚贤

素的定位（方式五种定位方式）:

静态定位: position:static;
相对定位: position:relative;
绝对定位: position:absolute;
固定定位: position: fixed;
浮动定位: float:left/right

静态定位(文档流定位)

格式: position:static; (默认的定位方式)
特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下无法实现元素的层叠效果
如何控制元素的位置? 通过外边距控制元素的位置

相对定位

格式: position:relative;
特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
如何控制元素的位置? 通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置
应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red
      }
    div:hover {
      /*margin: 20px 0 0 20px;*/
      /*修改为相对定位*/
      position: relative;
      top: 20px;
      left: 20px;
    }
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>

绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占原来的位置),可以实现元素层叠
如何控制元素的位置?通过left/right/top/bottom控制位置,参照物为窗口或某一个上级元素(需要在上级元素中添加position:relative作为参照物)
应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果

<style>
     div{
        width: 300px;padding: 10px;
        background-color: rgba(0,0,0,0.3);
        position: relative;/*参照物*/
      }
    input{
      width: 260px;/*300-20*2内边距*/
      padding: 10px 20px;border: none;
    }
    img{
      position: absolute;
      top: 14px;right: 40px;
    }
    p{margin: 0;font-size: 12px; color: red;}
    </style>
<body>
<div>
  <input type="text" placeholder="请输入用户名">
  <img src="http://celinf.org/yhm.png" alt="">
  <p>用户名不能为空!</p>
</div>
</body>

固定定位

格式: position:fixed;
特点: 脱离文档流
如何控制元素的位置?通过left/right/top/bottom相对于窗口做偏移
应用场景: 当需要将元素固定在窗口的某个位置时使用

<style>
      #d1{
        width: 1000px; height: 100px; background-color: red;
        position: fixed; top:0;
      }
    body{
      padding-top: 100px;
    }
    #d2{
      width: 50px;height: 200px;
      background-color: blue;
      position: fixed;
      padding-top: 200px;right: 0;
    }
  </style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
</body>

浮动定位

格式: float:left/right;
特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它元素时停止.
浮动元素一行装不下时会自动折行, 折行时有可能被卡住
当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题
应用场景: 当需要将纵向排列的元素改成横向排列时使用.

<style>
    body>div{
      width: 200px; border: 1px solid red;
      /*当元素的所有子元素全部浮动时 自动识别的高度为0
              后面的元素会顶上来导致显示异常,添加overflow:hidden解决此异常*/
      overflow: hidden;
    }
  #d1{
    width: 50px; height: 50px;
    background-color: red;
    float: left;
  }
  #d2{
    width: 50px; height: 50px;
    background-color: green;
    float: left;
  }
  #d3{
    width: 50px;height: 50px;
    background-color: blue;
    float: left;
  }
    </style>
<body>
<div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
</body>

溢出设置overflow

visible超出部分显示(默认)
hidden超出部分隐藏
scroll 超出部分滚动显示

行内元素垂直对齐方式vertical-align

top 上对齐
middle中间对齐
bottom下对齐
baseline基线对齐(默认)

<style>   /* 块元素居中  margin */
  div{
    width: 200px;height: 200px;
    border: 1px solid red;
    /*设置超出部分的显示方式*/
    overflow: scroll;
  }
img{
  width: 100px;
  /*设置行内元素的垂直对齐方式
            top上对齐
            middle中间对齐
            bottom下对齐
            baseline基线对齐(默认)*/
  vertical-align: bottom;
}
</style>

元素的显示层级

当两个元素非静态定位时可能存在层叠的问题通过z-index样式控制显示层级, 值越大显示越靠前

<style>
    #d1{
      width: 50px;height: 100px;
      background-color: red;
      position: absolute;
      /*设置显示层级 值越大显示越靠前
              只对非静态定位的元素有效*/
      z-index: 1;
    }
  #d2{
    width: 100px;height: 50px;
    background-color: blue;
    position: absolute;
    z-index: 2;
  }
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

综合布局练习（Demo）

Demo的效果图

<style>
  body{
    font: 12px "simhei", Arial, Helvetica, sans-serif;
    color: #666;
  }
body>div{
  width: 1000px;margin: 0 auto;
}
#t_l_div{
  width: 611px; height: 376px;
  float: left; position: relative;
}
#t_r_div{
  width: 375px; height: 376px;
  float: right;position: relative;
}
#t_div{
  overflow: hidden;margin-bottom: 10px;
}
#t_div>div,#b_l_div,#b_r_div>div{
  background-color: #e8e8e8;
}
#b_div{
  overflow: hidden;
}
#b_l_div{
  width: 366px;height: 233px;
  float: left;
}
#b_r_div{
  overflow: hidden;float: right;
}
#b_r_div>div{
  width: 198px;height: 233px;
  float: left;margin-left: 10px;
}
#ls_d1{
  margin: 25px 0 0 50px;width: 245px;
  height: 232px; padding: 5px;
}
.title_p{
  color: #333333; font-size: 32px;
  font-weight: lighter;
}
.intro_p{
  ont-size: 12px;font-weight: lighter;
}
.price_p{
  margin-bottom: 12px;font-weight: bold;
  color: #0AA1ED;font-size: 24px;
}
.a_title{
  display: block;
  background-color: #0aa1ed;
  color: white;width: 132px;
  height: 40px; text-align: center;
  line-height: 40px;font-size: 20px;
  text-decoration: none;border-radius: 2px;
}
#t_l_div>img{
  position: absolute;
  right: 20px;bottom: 15px;
}
#lr_d1{
  width: 253px;height: 232px;
  padding: 4px;text-align: left;
  margin: 39px 0 0 25px;
}
#t_r_div>img{
  position: absolute;
  right: 10px;bottom: 3px;
}
.s_title{
  font-size: 12px;width: 100px;
  height: 24px; line-height: 24px;
  margin: 0 auto;
}
.s_info{
  font-size: 12px;text-align: center;
  color: #333333;padding-top: 0;
  margin-top: 0;
}
.s_price{
  text-align: center;font-size: 12px;
  font-weight: bold;margin: 6px auto;
  color: #0aa1ed;
}
#b_l_div>p,ul{
  padding: 0;margin: 0;
}
#top_div{
  color: white; font-size: 16px;
  background-color: #0aa1ed;
  line-height: 35px;border-radius: 2px;
  bottom: 5px;
}
#top_div>img{
  float: left;margin: 10px 5px 0 10px;
}
.c_div{
  padding-left: 10px;
}
.c_div>p{
  color: #62B5EC; margin: 17px 0 9px 0;
}
.c_div>ul{
  list-style-type: none;overflow: hidden;
}
.c_div>ul>li{
  float: left;margin-right: 10px;
}
.c_div>ul>li>a{
  text-decoration: none;color: #0aa1ed;
}
</style>
<body>
<div>
    <div id="t_div">
        <div id="t_l_div">
            <div id="ls_d1">
                <p class="title_p">灵越 燃7000系列</p>
                <p class="intro_p">
                    酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                    英特尔HD显卡620含共享显卡内存
                </p>
                <p class="price_p">￥4999.00</p>
                <a href="#" class="a_title">查看详情</a>
            </div>
            <img src="http://celinf.cn/study_computer_img1.png" alt="图1">
        </div>
        <div id="t_r_div">
            <div id="lr_d1">
                <p class="title_p">颜值 框不住</p>
                <p class="intro_p">
                    酷睿双核i5处理器|256GB SSD| 8GB内存
                    <br>
                    英特尔HD显卡620含共享显卡内存
                </p>
                <p class="price_p">￥6888.00</p>
                <a href="#" class="a_title">查看详情</a>
            </div>
            <img src="http://celinf.cn/study_computer_img2.png" alt="图二">
        </div>
    </div>
    <div id="b_div">
        <div id="b_l_div">
            <div id="top_div">
                <img src="http://celinf.cn/computer_icon1.png" alt="图三">
                <span>电脑,办公/1F</span>
            </div>
            <div class="c_div">
                <p>电脑整机</p>
                <ul>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">游戏机</a></li>
                    <li><a href="#">台式机</a></li>
                    <li><a href="#">一体机</a></li>
                    <li><a href="#">服务器</a></li>
                    <li><a href="#">联想</a></li>
                </ul>
                <p>电脑配件</p>
                <ul>
                    <li><a href="#">CPU</a></li>
                    <li><a href="#">SSD硬盘</a></li>
                    <li><a href="#">显示器</a></li>
                    <li><a href="#">显卡</a></li>
                    <li><a href="#">组装电脑</a></li>
                    <li><a href="#">机箱</a></li>
                </ul>
                <p>外设/游戏</p>
                <ul>
                    <li><a href="#">键盘</a></li>
                    <li><a href="#">鼠标</a></li>
                    <li><a href="#">U盘</a></li>
                    <li><a href="#">移动硬盘</a></li>
                    <li><a href="#">游戏设备</a></li>
                    <li><a href="#">智能单车</a></li>
                </ul>
            </div>
        </div>
        <div id="b_r_div">
            <div class="s_list">
                <img src="http://celinf.cn/study_computer_img3.png" alt="图四">
                <p class="s_info">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
                <p class="s_price">￥4600.00</p>
                <a href="#" class="a_title s_title">查看详情</a>
            </div>
            <div class="s_list">
                <img src="http://celinf.cn/study_computer_img3.png" alt="图四">
                <p class="s_info">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
                <p class="s_price">￥4600.00</p>
                <a href="#" class="a_title s_title">查看详情</a>
            </div>
            <div class="s_list">
                <img src="http://celinf.cn/study_computer_img3.png" alt="图四">
                <p class="s_info">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
                <p class="s_price">￥4600.00</p>
                <a href="#" class="a_title s_title">查看详情</a>
            </div>
        </div>
    </div>
</div>
</body>

学习记录，如有侵权请联系删除

在线咨询

上一篇：JavaScript 中undefined与null
下一篇：前端技巧：用css画一个QQ浏览器图标

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

抖音上很火的3D立体动态相册实现代码！赶快学起来吧

言

依赖工具

初始化

安装依赖

部署

执行

调试

参考阅读

您的项目需求