完整代码:
<!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中的代码: /*将正方形转变为块元素
/*将正方形转变为块元素*/
#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;