你的位置:首页 > 网页设计

[网页设计]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 */

这里用span是为了区分里面的立方体。

/***************************根据腾讯直播课程总结*************************/