當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

3d立方体旋转相册

發(fā)布時間：2023/12/14 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 3d立方体旋转相册小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

抖音上要到的效果

2019年11月19日做了教程更新，沒弄出來的直接看下面的更新

文件目錄

按照這個目錄創(chuàng)建就可以，照片放到 img 文件夾里，照片名字按下面方式命名，照片后綴是 .jpg

照片命名

HTML

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>css-3d旋轉</title><link rel="stylesheet" href="css/index.css" /></head><body><div class="wrap"><div class="cube"><div class="out_front"><img src="img/1.jpg" class="pic"/></div><div class="out_back"><img src="img/2.jpg" class="pic"/></div><div class="out_left"><img src="img/3.jpg" class="pic"/></div><div class="out_right"><img src="img/4.jpg" class="pic"/></div><div class="out_top"><img src="img/5.jpg" class="pic"/></div><div class="out_bottom"><img src="img/6.jpg" class="pic"/></div> <span class="in_front"><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></div></body> </html>

CSS

html{background: #000;height: 100%; } /*最外層容器樣式*/ .wrap{position: relative;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 200px;margin: auto;/*改變左右上下,圖片方塊移動*/} /*包裹所有容器樣式*/ .cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*勻速*/animation-timing-function: linear; } @-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);} } .cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s; } /*定義所有圖片樣式*/ .pic{width: 200px;height: 200px; } .cube .out_front{transform: rotateY(0deg) translateZ(100px); } .cube .out_back{transform: translateZ(-100px) rotateY(180deg); } .cube .out_left{transform: rotateY(90deg) translateZ(100px); } .cube .out_right{transform: rotateY(-90deg) translateZ(100px); } .cube .out_top{transform: rotateX(90deg) translateZ(100px); } .cube .out_bottom{transform: rotateX(-90deg) translateZ(100px); } /*定義小正方體樣式*/ .cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px; } .cube .in_pic{width: 100px;height: 100px; } .cube .in_front{transform: rotateY(0deg) translateZ(50px); } .cube .in_back{transform: translateZ(-50px) rotateY(180deg); } .cube .in_left{transform: rotateY(90deg) translateZ(50px); } .cube .in_right{transform: rotateY(-90deg) translateZ(50px); } .cube .in_top{transform: rotateX(90deg) translateZ(50px); } .cube .in_bottom{transform: rotateX(-90deg) translateZ(50px); } /*鼠標移入后樣式*/ .cube:hover .out_front{transform: rotateY(0deg) translateZ(200px); } .cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg); } .cube:hover .out_left{transform: rotateY(90deg) translateZ(200px); } .cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px); } .cube:hover .out_top{transform: rotateX(90deg) translateZ(200px); } .cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px); }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 以下2019年7月2日修改

新建文件夾，然后所有步驟在里面進行操作。

然后創(chuàng)建css和img文件夾

最后說下圖片大小，圖片像素580*549 左右就行（長*寬）

2019年11月19日更新

本來想上傳到csdn上讓大家免費下載后來發(fā)現，下載積分是csdn自己定的修改不了，那就這樣吧重新一步一步的把步驟發(fā)一下。

第一步：新建txt文件

第二步：把以下代碼復制到txt文件中，并保存

第三步：將文件改名為 index.html

第四步：新建文件夾，并改名為 css

第五步：進入css文件夾，并再次新建txt文件

第六步：將以下代碼考入該文件，并保存，然后改名

復制完成后如圖：

重命名為： index.css

第七步：新建文件夾，改名為 img

第八步：將圖片考入 img 文件夾中，命名就按下圖的方式命名，照片名一定要是1.jpg 2.jpg 3.jpg?4.jpg?到 12.jpg?，不能起別的名字。

1.jgp? 2.jgp 3.jpg 4.jpg 等等往下類推，最多到? 12.jpg? ?也就是最多放12張照片。

關于圖片大小，圖片像素580549 左右就行（長寬）。

最后的最后：關于修圖片，我想這個不用我說了吧，作為廣大舔狗中的一員怎么能不會修女神的照片呢，PS，美圖秀秀，甚至畫圖都可以修改圖片大小。

為了以防萬一真有不會修改圖片大小的！以下用畫圖修改大小，看好了！！！！

首先以防萬一有些人手殘改錯！！！先把要修改的圖片復制出來備份一份，省的改壞了，連個原來正常的圖片都沒有，到時候被你女神呵呵了可別來找我！！

復制好以后，你就可以拿這個照片隨便改著玩了（你給他畫個烏龜都可以? ||? >_>? ||），反正還有復制出來備份好的那一張。

選擇你要修改的圖片---右鍵，用畫圖打開-----點擊重新調整大小----像素----勾去“保持縱橫比”的勾，然后就可以修改像素大小了------修改完畢點確定--------保存-------搞定！

最后的最后：因為代碼也不是我自己寫的，我也沒仔細研究，就當個玩的收藏了，感覺不錯，分享記錄下，也沒想到會有這么多伙伴想要這些代碼。關于要修改效果整體大小的，我只能告訴你們需要改很多地方，下圖紅框處基本都是要修改的地方并且還有好多地方我沒有截圖，因為這是個整體的效果你修改里層或者外層的同同時還要修改圖片之間的邊距，以及轉的角度。。。如果一定要改的話，自己去研究下代碼，看不懂的可以百度下什么意思，自己修改下試試看。

如果你不是搞IT的人的話，那我勸你還是放棄吧，別把時間浪費在這，有這功夫多給你女神跑跑腿也比這來得實在，又或者你就是有毅力就要修改代碼的話，你可以努力去搞懂這些代碼，然后修改它。如果你改成功了的話，那么恭喜你，又掌握了一項牛批的新技能，這樣你就可以多賺點錢，在你女神將來結婚的時候多隨點錢，也顯得倍兒有面兒不是。

如果你是搞IT的，那你連這個東西都不想自己動手自己搞的話，那你也別做IT這個行業(yè)了，這個行業(yè)不適合你。

鏈接：https://pan.baidu.com/s/1W4z8X7pPpcdqIzbURrvKlg?
提取碼：rn0q

總結

以上是生活随笔為你收集整理的3d立方体旋转相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。