css3制作旋转立方体相册
2016-08-12 22:32
447 查看
css3制作旋转立方体相册
首先让我们来看一下最终效果图：
当鼠标放在图片上是介个样子滴：
是不是觉得很好看？那接下来就一起制作吧！
我个人觉得编程，首先是思路，然后是代码，一起分析一下这个效果的思路。
1.背景颜色，它属于一种渐变的背景色（当然这不是重点，可以根据自己的爱好进行设置）；
2.我们可以观察一下他是有两个旋转的立方体，大立方体套小立方体；
3.点击图片的时候，外部大立方体向外延伸。
有了这个大体的思路我们就可以开始敲代码了。
1.新建文件夹
将各个不同类型的代码进行归类是很有必要的，新建css和img文件夹，将事先保存的图片放在img里面，新建demo.css放在css文件夹里，新建demo.html放在外面。
2.将背景设置成渐变
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100%;
background:linear-gradient(yellow 0%,black 100%);
}
这里为了方便用*号代替，padding 和margin是为了清除默认的间距。linear-gradient就是设置渐变属性的必要元素啦。
3.制作旋转大立方体
html代码：
<div id="react"> <div class="out_frount"> <img src="img/1.jpg" class="out_pic"> </div> <div class="out_back"> <img src="img/2.jpg" class="out_pic"> </div> <div class="out_left"> <img src="img/3.jpg" class="out_pic"> </div> <div class="out_right"> <img src="img/4.jpg" class="out_pic"> </div> <div class="out_top"> <img src="img/5.jpg" class="out_pic"> </div> <div class="out_bottom"> <img src="img/6.jpg" class="out_pic"> </div> </div>
css代码：
#react{
width: 200px;
height:200px;
margin: 200px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .4s;
}
div .out_pic{
width:200px;
height:200px;
opacity:0.9;
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.out_frount{
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);
}
思路：
（1）首先写一个大的div用来包裹立方体的图片，然后再用六个div包裹六个img代表正反体的各个面。
（2）通过position：absolute;属性使六张图片重叠。
（3）@keyframes定义rotate放方法用于旋转图片，在#react中使用animation引入，到此为止就可以看到图片旋转效果了。
（4）通过transform定位img的div是六张图片组成正方体,这个地方如果不太明白建议画一个平面直角坐标系，这样更直观哦
注：margin的宽高很关键，需要和正方体大小一样，否则旋转的时候回四处乱转……
到此为止一个大的立方体旋转就出来了，小的思路是一样的，这里不再演示。
鼠标放在图片上图片展开：
#react:hover .out_frount{
transform:translateZ(200px);
}
#react:hover .out_back{
transform:translateZ(-200px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
思路：
直接使用hover 更改包裹图片的div距离z轴的距离（好别扭的话……）
上完整代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="css/demo.css"> </head> <body> <div id="react"> <div class="out_frount"> <img src="img/1.jpg" class="out_pic"> </div> <div class="out_back"> <img src="img/2.jpg" class="out_pic"> </div> <div class="out_left"> <img src="img/3.jpg" class="out_pic"> </div> <div class="out_right"> <img src="img/4.jpg" class="out_pic"> </div> <div class="out_top"> <img src="img/5.jpg" class="out_pic"> </div> <div class="out_bottom"> <img src="img/6.jpg" class="out_pic"> </div> <span class="in_frount"> <img src="img/7.jpg" class="in_pic"> </span> <span class="in_back"> <img src="img/8.jpg" class="in_pic"> </span> <span class="in_left"> <img src="img/9.jpg" class="in_pic"> </span> <span class="in_right"> <img src="img/10.jpg" class="in_pic"> </span> <span class="in_top"> <img src="img/11.jpg" class="in_pic"> </span> <span class="in_bottom"> <img src="img/12.jpg" class="in_pic"> </span> </div> </body> </html>
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100%;
background:linear-gradient(yellow 0%,black 100%);
}
#react{
width: 200px;
height:200px;
margin: 200px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .4s;
}
div .out_pic{
width:200px;
height:200px;
opacity:0.9;
}
div .in_pic{
width:100px;
height:100px;
}
#react span{
display:block;
position:absolute;
width:100px;
height:100px;
top:50px;
left:50px;
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.out_frount{
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);
}
.in_frount{
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);
}
#react:hover .out_frount{
transform:translateZ(200px);
}
#react:hover .out_back{
transform:translateZ(-200px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
@charset "utf-8";
/* CSS Document */
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯CSS3动画之旋转的立方体
- 用css3制作旋转加载动画的几种方法
- CSS3 制作旋转的大风车
- CSS3 制作旋转的大风车
- CSS3制作旋转的3D立方体
- CSS3:制作3D旋转导航综合练习题
- CSS3特效----制作3D旋转导航
- CSS3制作鼠标经过三角形旋转
- CSS3 3D旋转立方体
- Android中3D技术基础详解 ---制作一个可旋转的立方体
- CSS3 制作旋转的大风车
- css3制作旋转动画
- 纯css3实现立方体旋转效果
- css3-立方体3d旋转动画
- CSS3制作3D旋转视频展示区
- CSS3制作3D旋转视频展示区
- 使用css3 实现旋转的立方体
- CSS3制作酷炫的三维相册效果
- CSS3景深、三维变换属性及旋转三维立方体的实现
- css3实现旋转的立方体