【前端领域】3D旋转超美相册（HTML+CSS）
世界上總有一半人不理解另一半人的快樂。
——《愛瑪》
目錄
一、前言
二、本期作品介紹
? ?3D旋轉(zhuǎn)相冊(cè)
三、效果展示
四、詳細(xì)介紹?
五、編碼實(shí)現(xiàn)
index.html
style.css?
img
?六、獲取源碼
公眾號(hào)獲取源碼?
獲取源碼？私信？關(guān)注？點(diǎn)贊？收藏？
一、前言
????????新的一年，我們是是否需要一個(gè)新的相冊(cè)呢？答案：是的。
? ??????2023年，已經(jīng)過去了一個(gè)半月的時(shí)間，我們已經(jīng)在2023年，經(jīng)歷了大大小小很多的事情，不知道那些事情值得你記憶呢？你是否還記得呢？
? ? ? ? 今天，為大家推薦的是一款好看的3D旋轉(zhuǎn)相冊(cè)，用來(lái)記錄2023年的美好時(shí)刻，一個(gè)不算新穎但很有創(chuàng)意的作品，記錄美好生活，設(shè)計(jì)相冊(cè)效果等。都是很值得使用的。? ? ? ??
????????最近，迎來(lái)新的一個(gè)學(xué)期的開始，不知道你是否已經(jīng)準(zhǔn)備好迎接新的學(xué)期？身邊的朋友都陸陸續(xù)續(xù)的開學(xué)了，我們也快了，新的學(xué)期，新的一年，你有什么目標(biāo)呢？準(zhǔn)備好實(shí)現(xiàn)了嗎？在此，也祝大家在新的一學(xué)期，迎來(lái)新的超越，達(dá)到新的目標(biāo)，實(shí)現(xiàn)新的理想，不斷超越自己。
二、本期作品介紹
? ?3D旋轉(zhuǎn)相冊(cè)
? ?本文是一篇簡(jiǎn)單的前端代碼，主要內(nèi)容僅包含 HTML，CSS 等內(nèi)容? ?主要為 CSS
?????1、HTML代碼
? ? ?2、CSS樣式
? ? ?3、插件等
? ? ?4、旋轉(zhuǎn)特效
? ? ?5、圖片
? ? ?6、鼠標(biāo)放置效果
? ? ?7、可添加背景音樂，背景圖等
?????8、添加文字介紹
三、效果展示
讓我們一起，欣賞吧！！！
A.正常打開效果
B.鼠標(biāo)放置
?C.添加圖片
注意哦！！！
可以在此基礎(chǔ)上添加背景音樂，點(diǎn)擊特效，背景圖等
特別提醒一下大家，注意圖片像素（尺寸），否則會(huì)顯示不出來(lái)的/(ㄒoㄒ)/~~
四、詳細(xì)介紹?
第一點(diǎn)： 3D旋轉(zhuǎn)相冊(cè)，顧名思義
第二點(diǎn)： 可以自由添加背景音樂，背景圖等
第三點(diǎn)： 可以用在多種情景，普通相冊(cè)展示，介紹等
五、編碼實(shí)現(xiàn)
顯示完整代碼
注意路徑(⊙o⊙)？
o(*￣▽￣*)ブ?
(? ?_?)?
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Enovo3D相冊(cè)</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文件的路徑噢！！！
?六、獲取源碼
老規(guī)矩，先給朋友們看一下完整文件夾，
正確的文件如下圖 ，復(fù)制源碼的朋友們請(qǐng)注意了！！！
公眾號(hào)獲取源碼?
第一步，通過微信公眾號(hào)下載源碼壓縮包，解壓并打開文件夾，即為上圖樣式（復(fù)制源碼請(qǐng)注意路徑及文件名）
第二步，點(diǎn)擊 html 文件 打開即可查看
2023年第十八期，希望得到大家的喜歡🙇?
希望大家有好的意見或者建議，歡迎私信，一起討論(⊙o⊙)？做出更改。
是否精彩呢？如果有好的建議或者想法可以聯(lián)系我，一起交流🙇?
以上就是本篇文章的全部?jī)?nèi)容了
?~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識(shí)!
1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧，你的「點(diǎn)贊，好評(píng)，收藏」是我創(chuàng)作的動(dòng)力。
2.關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、HTML模板 、C++、數(shù)據(jù)結(jié)構(gòu)、Python程序設(shè)計(jì)、Java程序設(shè)計(jì)、爬蟲等！?「在這里有好多 開發(fā)者，一起探討 前端 開發(fā)?知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)，可 關(guān) 注 ↓公 Z 號(hào) 獲取更多源碼 !
?
獲取源碼？私信？關(guān)注？點(diǎn)贊？收藏？
👍+??+??+🙇?
有需要源碼的小伙伴可以 關(guān)注下方微信公眾號(hào) " Enovo開發(fā)工廠 "，回復(fù) 關(guān)鍵詞 " 1-3D相冊(cè)?"
總結(jié)
以上是生活随笔為你收集整理的【前端领域】3D旋转超美相册（HTML+CSS）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ipad可以装二级计算机培训吗,当初给孩
- 下一篇： 离散数学学习