【前端领域】3D旋转超美相册（HTML+CSS）
世界上總有一半人不理解另一半人的快樂。
——《愛瑪》
目錄
一、前言
二、本期作品介紹
? ?3D旋轉相冊
三、效果展示
四、詳細介紹?
五、編碼實現
index.html
style.css?
img
?六、獲取源碼
公眾號獲取源碼?
獲取源碼？私信？關注？點贊？收藏？
一、前言
????????新的一年，我們是是否需要一個新的相冊呢？答案：是的。
? ??????2023年，已經過去了一個半月的時間，我們已經在2023年，經歷了大大小小很多的事情，不知道那些事情值得你記憶呢？你是否還記得呢？
? ? ? ? 今天，為大家推薦的是一款好看的3D旋轉相冊，用來記錄2023年的美好時刻，一個不算新穎但很有創意的作品，記錄美好生活，設計相冊效果等。都是很值得使用的。? ? ? ??
????????最近，迎來新的一個學期的開始，不知道你是否已經準備好迎接新的學期？身邊的朋友都陸陸續續的開學了，我們也快了，新的學期，新的一年，你有什么目標呢？準備好實現了嗎？在此，也祝大家在新的一學期，迎來新的超越，達到新的目標，實現新的理想，不斷超越自己。
二、本期作品介紹
? ?3D旋轉相冊
? ?本文是一篇簡單的前端代碼，主要內容僅包含 HTML，CSS 等內容? ?主要為 CSS
?????1、HTML代碼
? ? ?2、CSS樣式
? ? ?3、插件等
? ? ?4、旋轉特效
? ? ?5、圖片
? ? ?6、鼠標放置效果
? ? ?7、可添加背景音樂，背景圖等
?????8、添加文字介紹
三、效果展示
讓我們一起，欣賞吧！！！
A.正常打開效果
B.鼠標放置
?C.添加圖片
注意哦！！！
可以在此基礎上添加背景音樂，點擊特效，背景圖等
特別提醒一下大家，注意圖片像素（尺寸），否則會顯示不出來的/(ㄒoㄒ)/~~
四、詳細介紹?
第一點： 3D旋轉相冊，顧名思義
第二點： 可以自由添加背景音樂，背景圖等
第三點： 可以用在多種情景，普通相冊展示，介紹等
五、編碼實現
顯示完整代碼
注意路徑(⊙o⊙)？
o(*￣▽￣*)ブ?
(? ?_?)?
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Enovo3D相冊</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head> <body><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol> </div> </body> </html>style.css?
@charset "utf-8"; *{margin:0;padding:0; } body{/*background: url(../img/preview.png) ;*/max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: auto;margin-right: auto; } li{list-style: none; } .box{width:200px;height:200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(13deg);-webkit-animation:move 5s linear infinite; } .minbox{width:100px;height:100px;position: absolute;left:50px;top:30px;-webkit-transform-style:preserve-3d; } .minbox li{width:100px;height:100px;position: absolute;left:0;top:0; } .minbox li:nth-child(1){background: url(../img/01.png) no-repeat 0 0;-webkit-transform:translateZ(50px); } .minbox li:nth-child(2){background: url(../img/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px); } .minbox li:nth-child(3){background: url(../img/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px); } .minbox li:nth-child(4){background: url(../img/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-child(5){background: url(../img/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px); } .minbox li:nth-child(6){background: url(../img/06.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox li:nth-child(1){background: url(../img/1.png) no-repeat 0 0;-webkit-transform:translateZ(50px); } .maxbox li:nth-child(2){background: url(../img/2.png) no-repeat 0 0;-webkit-transform:translateZ(50px); } .maxbox li:nth-child(3){background: url(../img/3.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px); } .maxbox li:nth-child(4){background: url(../img/4.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px); } .maxbox li:nth-child(5){background: url(../img/5.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px); } .maxbox li:nth-child(6){background: url(../img/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox{width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;} .maxbox li{width: 200px;height: 200px;background: #fff;border:1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition:all 1s ease; } .maxbox li:nth-child(1){-webkit-transform:translateZ(100px); } .maxbox li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(100px); } .maxbox li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(100px); } .maxbox li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(100px); } .maxbox li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(100px); } .maxbox li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(100px); } .box:hover ol li:nth-child(1){-webkit-transform:translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } .box:hover ol li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } .box:hover ol li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } .box:hover ol li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } .box:hover ol li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } .box:hover ol li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px; } @keyframes move{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);} }img
一定注意image文件的路徑噢！！！
?六、獲取源碼
老規矩，先給朋友們看一下完整文件夾，
正確的文件如下圖 ，復制源碼的朋友們請注意了！！！
公眾號獲取源碼?
第一步，通過微信公眾號下載源碼壓縮包，解壓并打開文件夾，即為上圖樣式（復制源碼請注意路徑及文件名）
第二步，點擊 html 文件 打開即可查看
2023年第十八期，希望得到大家的喜歡🙇?
希望大家有好的意見或者建議，歡迎私信，一起討論(⊙o⊙)？做出更改。
是否精彩呢？如果有好的建議或者想法可以聯系我，一起交流🙇?
以上就是本篇文章的全部內容了
?~ 關注我，點贊博文~ 每天帶你漲知識!
1.看到這里了就 [點贊+好評+收藏] 三連 支持下吧，你的「點贊，好評，收藏」是我創作的動力。
2.關注我 ~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、HTML模板 、C++、數據結構、Python程序設計、Java程序設計、爬蟲等！?「在這里有好多 開發者，一起探討 前端 開發?知識，互相學習」！
3.以上內容技術相關問題可以相互學習，可 關 注 ↓公 Z 號 獲取更多源碼 !
?
獲取源碼？私信？關注？點贊？收藏？
👍+??+??+🙇?
有需要源碼的小伙伴可以 關注下方微信公眾號 " Enovo開發工廠 "，回復 關鍵詞 " 1-3D相冊?"
總結
以上是生活随笔為你收集整理的【前端领域】3D旋转超美相册（HTML+CSS）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ipad可以装二级计算机培训吗,当初给孩
- 下一篇： 离散数学学习