首先让我们来看一下最终效果图：

当鼠标放在图片上是介个样子滴：

是不是觉得很好看？那接下来就一起制作吧！

我个人觉得编程，首先是思路，然后是代码，一起分析一下这个效果的思路。

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代码：

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轴的距离（好别扭的话……）

上完整代码：

无标题文档

*{ 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";

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

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