完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="new_file.css">
</head>
<body>
<div id="wrap">
<!--先组装内部的正方体-->
<span id="in-front"><img src="img/1.jpg" alt=""></span>
<span id="in-back"><img src="img/1.jpg" alt=""></span>
<span id="in-left"><img src="img/1.jpg" alt=""></span>
<span id="in-right"><img src="img/1.jpg" alt=""></span>
<span id="in-top"><img src="img/1.jpg" alt=""></span>
<span id="in-bottom"><img src="img/1.jpg" alt=""></span>
<div id="out-front"><img src="img/2.jpg" alt=""></div>
<div id="out-back"><img src="img/2.jpg" alt=""></div>
<div id="out-left"><img src="img/2.jpg" alt=""></div>
<div id="out-right"><img src="img/2.jpg" alt=""></div>
<div id="out-top"><img src="img/2.jpg" alt=""></div>
<div id="out-bottom"><img src="img/2.jpg" alt=""></div>
</body>
</html>
html{
background: #000;
}
#wrap span{
display:block;
width:100px;
height:100px;
background-color: aqua;
position:absolute;/*绝对定位*/
top: 50px;
left: 50px;/*距离外层立方体50px*/
opacity: 0.8;
}
/*设置,外层的立方体*/
#wrap div{
width:200px;
height:200px;
background-color: coral;
position:absolute;/*绝对定位*/
transition:all 0.4s ;
opacity: 0.8;
}
#wrap span img{
width:100%;
height: 100%;
}
#wrap div img{
width:100%;
height: 100%;
}
#wrap{
width:200px;
height:200px;
margin: 200px auto;
animation: rotate 20s infinite;
transform-style:preserve-3d;
animation-timing-function:linear ;
}
#in-front{
transform: translateZ(50px);
}
#in-back{
transform:translateZ(-50px);
}
#in-left{
transform: rotateY(90deg) translateZ(50px);
}
#in-right{
transform: rotateY(-90deg) translateZ(50px);
}
#in-top{
transform: rotateX(-90deg) translateZ(50px);
}
#in-bottom{
transform: rotateX(90deg) translateZ(50px);
}
#out-front{
transform: translateZ(100px);
}
#out-back{
transform:translateZ(-100px);
}
#out-left{
transform: rotateY(90deg) translateZ(100px);
}
#out-right{
transform: rotateY(-90deg) translateZ(100px);
}
#out-top{
transform: rotateX(-90deg) translateZ(100px);
}
#out-bottom{
transform: rotateX(90deg) translateZ(100px);
}
@keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
#wrap:hover #out-front{
transform: translateZ(200px);
}
#wrap:hover #out-back{
transform: translateZ(-200px);
}
#wrap:hover #out-left{
transform: rotateY(90deg) translateZ(200px);
}
#wrap:hover #out-right{
transform: rotateY(-90deg) translateZ(200px);
}
#wrap:hover #out-top{
transform: rotateX(-90deg) translateZ(200px);
}
#wrap:hover #out-bottom{
transform: rotateX(90deg) translateZ(200px);
}
第一步
（1）html中写入6个小正方形标签
html中的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--准备一个大的包裹器，id是wrap-->
<div id="wrap">
<!--组装内部的小正方体-->
<!--以下六个标签分别代表六个面-->
<span id="in-front"></span>
<span id="in-back"></span>
<span id="in-left"></span>
<span id="in-right"></span>
<span id="in-top"></span>
<span id="in-bottom"></span>
</div>
</body>
</html>
（2）使用css转变为块元素
css中的代码: /*将正方形转变为块元素
/*将正方形转变为块元素*/
#wrap span
{
display:block;
/*小正方体宽和高*/
width:100px;
height:100px;
/*面的颜色*/
background-color: aqua;
}
代码和浏览器运行效果：
第二步，组成小立方体
（1）绝对定位：
将正方形设置为绝对定位，即在css中#wrap span中添加绝对定位代码：
position:absolute; 这个时候6个正方形叠在了一起
（2）旋转跳跃：
在css中添加以下代码可以让叠在一起的正方形变成立方体：
/*前面*/
#in-front
{
transform: translateZ(50px);
}
/*后面*/
#in-back
{
transform:translateZ(-50px);
}
/*左面*/
#in-left
{
transform: rotateY(90deg) translateZ(50px);
}/*绕Y轴旋转90°，离Z轴50px的距离*/
/*右面*/
#in-right
{
transform: rotateY(-90deg) translateZ(50px);
}
/*上面*/
#in-top{
transform: rotateX(-90deg) translateZ(50px);
}
/*下面*/
#in-bottom
{
transform: rotateX(90deg) translateZ(50px);
}
第三步，3D旋转
（1）加入旋转所需的函数：
在css添加一个动态函数，使它能够旋转动起来。代码如下：
@keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
因为这个6面都是在包裹器中，所以也要设置一下包裹器，在css中添加下面这段代码，宽高是100px,正好包裹立方体6个面，然后距离浏览器上下200px，达到水平居中的效果，绑定选择器keyframe的名称rotate,完成动画的时间20s,infinite设置循环,linear效果为匀速 。
#wrap
{
width:100px;
height:100px;
margin: 200px auto;
animation: rotate 20s infinite;
transform-style:preserve-3d;
animation-timing-function:linear ;
}
第四步，给小立方体每个面上图
（1）建一个放图片的文件夹
在文件夹中新建一个放图片的文件夹，命名为img，并加入一张图片命名为1.jpg
（2）加入img
每条span标签中都加一条
代码
发现图片格式太大，就变成这样了
（1）改变图片格式：
图片格式太大会出问题，所以要在css中添加以下代码可以使插入的图片格式正好
/*设置图片的大小*/
#wrap span img
{
width:100%;
height: 100%;
}
这样里面的立方体就算做好了
第五步，制作外层立方体
(1)加入外层的立方体，
在html中包裹器wrap添加以下代码，
<div id="out-front"></div>
<div id="out-back"></div>
<div id="out-left"></div>
<div id="out-right"></div>
<div id="out-top"></div>
<div id="out-bottom"></div>
同时在css中也添加：
/设置,外层的立方体/
#wrap div{
width:200px;
height:200px;
background-color: coral;
}
(2)绝对定位：
和上面6个小正方形组成小立方体类似，将6个外层的大正方形组成大立方体，在css中的#wrap div中添加绝对定位代码：position:absolute; 发现绝对定位6个大正方形也叠在了一起
(3)旋转跳跃：
也是将各个正方形移动到它该去的地方，组成外层的立方体，在css中添加代码：
#out-front
{
transform: translateZ(100px);
}
#out-back
{
transform:translateZ(-100px);
}
#out-left
{
transform: rotateY(90deg) translateZ(100px);
}
#out-right
{
transform: rotateY(-90deg) translateZ(100px);
}
#out-top
{
transform: rotateX(-90deg) translateZ(100px);
}
#out-bottom
{
transform: rotateX(90deg) translateZ(100px);
}
(4)使小立方体处在大立方体中心
上图虽然总体看似好像有了雏形，但是我们还要操作一下里面的小立方体，要在css中的#wrap span中加入
top: 50px;
left: 50px;
从而使小立方体距离外层立方体50px，做完这步因为外层立方体包裹住的原因，我们不能看出里面立方体的效果。
第六步，为外层立方体添加图片
（1）添加图片
将一张图片放入img文件夹中，命名为2.jpg
（2）给外层立方体放上图片
在html中将大立方体的标签（div)加入img属性，标签中添加6条<img src="img/2.jpg" alt="">这样的语句，但是有时候因为图片格式太大就会出现这种情况。
（3）修改图片格式
上一步发现还是出现图片格式太大的问题，那么只需要在css中加入限制大立方体图片属性即可：
#wrap div img
{
width:100%;
height: 100%;
}
第七步，做鼠标移入后的动画
（1）鼠标移上去，外层发生变化
在css中添加以下代码：
#wrap:hover #out-front
{
transform: translateZ(200px);
}
#wrap:hover #out-back
{
transform: translateZ(-200px);
}
#wrap:hover #out-left
{
transform: rotateY(90deg) translateZ(200px);
}
#wrap:hover #out-right
{
transform: rotateY(-90deg) translateZ(200px);
}
#wrap:hover #out-top
{
transform: rotateX(-90deg) translateZ(200px);
}
#wrap:hover #out-bottom
{
transform: rotateX(90deg) translateZ(200px);
}
虽然可以发生变化，但是外层打开的动画很生硬，非常突兀。
（2）加入打开时间
设置鼠标移入后的动画变化的时间效果，时间为0.4s，在#wrap div中添加代码：transition:all 0.4s ;
图片就会有一个0.4的打开时间了，就会好看很多。
（3）修改包裹器
我们发现在立方体运动过程还会往上移，这不是我们想看到的，下图很明显可以看出旋转过程中发现往上移动了很多。原因在于我们一开始定义的包裹器大小只有100px，而后来的外层立方体是200px，所以需要修改包裹器的大小，使它能完美包裹外层立方体。
（4）美化
①可以将背景变为黑色，还可以设置透明度，效果会更好，在css加入：
html{
background: #000;
}
分别在#wrap span和#wrap div中加入透明度代码：opacity: 0.8;
