首先讓咱們來看一下最終效果圖： 
css
當鼠標放在圖片上是介個樣子滴：html
是否是以爲很好看？那接下來就一塊兒製做吧！react
我我的以爲編程，首先是思路，而後是代碼，一塊兒分析一下這個效果的思路。css3
1.背景顏色，它屬於一種漸變的背景色（固然這不是重點，能夠根據本身的愛好進行設置）；編程
2.咱們能夠觀察一下他是有兩個旋轉的立方體，大立方體套小立方體；post
3.點擊圖片的時候，外部大立方體向外延伸。url
有了這個大致的思路咱們就能夠開始敲代碼了。spa
1.新建文件夾3d
將各個不一樣類型的代碼進行歸類是頗有必要的，新建css和img文件夾，將事先保存的圖片放在img裏面，新建demo.css放在css文件夾裏，新建demo.html放在外面。code
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 */