首先讓我們來看一下最終效果圖：
當鼠標放在圖片上是介個樣子滴：
是不是覺得很好看？那接下來就一起制作吧！
我個人覺得編程，首先是思路，然后是代碼，一起分析一下這個效果的思路。
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是為了區分里面的立方體。
/***************************根據騰訊直播課程總結*************************/