生活随笔
收集整理的這篇文章主要介紹了
正方体3D旋转相册
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
正方體旋轉相冊
首先我們來看一下效果圖 作者博客地址
接下來我們就干起來
新建一些文件夾如下圖所示
其中img文件就是存放圖片得文件夾，music存放得是背景音樂得文件夾，CSS存放得是樣式文件
下面就來貼代碼
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 40s 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
);
}
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><audio src="music/你的答案.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<script>var bgmusic = document.getElementById('bgmusic');bgmusic.addEventListener('canplay', function(){this.play();}, false);window.addEventListener('load', function(){window.addEventListener('touchstart', once, false);}, false);function once(){bgmusic.play();window.removeEventListener('touchstart', once, false);}</script></body>
</html>
要做得就是把上面圖片得名字改成自己文件夾下得文件名就好了
下載一首音樂放入music文件夾中，把html中的音樂文件名換成自己的音樂名就OK了
大功告成了，就雙擊html文件在瀏覽器中打開。當然這里會出現一點問題，就是背景音樂沒有自動播放。這是瀏覽器的限制，像谷歌瀏覽器默認是不允許自動播放的，我們可以更改一下默認設置為允許。如谷歌瀏覽器，輸入(chrome://flags/#autoplay-policy)出現如下界面
把Autoplaypolicy設為允許，這樣背景音樂就可以自動播放了
旋轉相冊
先來看一下效果圖
步驟和上面類似，或者相對來說更簡單
建立如下圖所示的文件夾
img文件夾放入你想展示的圖片，music文件夾放入背景音樂文件，接下來所有的代碼都在如下的html中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋轉相冊
</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0;
}
body{background: black;
}
.content{width: 200px;height: 150px;position: relative;margin:200px auto 0;perspective: 1500px;
}
.box{width: 200px;height: 150px;transform-style: preserve-3d;transform:rotateX(-30deg);animation:photo 45s linear infinite;
}
.box:hover{animation:photo 45s linear infinite paused;
}
.box img{width: 200px;height: 150px;position: absolute;left: 0;top: 0;transform-style: preserve-3d;transition: all 1s;
}
.box img:nth-child(1){transform:translateZ(280px);
}
.box img:nth-child(2){transform:rotateY(40deg) translateZ(280px);
}
.box img:nth-child(3){transform:rotateY(80deg) translateZ(280px);
}
.box img:nth-child(4){transform:rotateY(120deg) translateZ(280px);
}
.box img:nth-child(5){transform:rotateY(160deg) translateZ(280px);
}
.box img:nth-child(6){transform:rotateY(200deg) translateZ(280px);
}
.box img:nth-child(7){transform:rotateY(240deg) translateZ(280px);
}
.box img:nth-child(8){transform:rotateY(280deg) translateZ(280px);
}
.box img:nth-child(9){transform:rotateY(320deg) translateZ(280px);
}.box img:nth-child(1):hover{transform:translateZ(280px) scale(1.2);
}
.box img:nth-child(2):hover{transform:rotateY(40deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(3):hover{transform:rotateY(80deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(4):hover{transform:rotateY(120deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(5):hover{transform:rotateY(160deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(6):hover{transform:rotateY(200deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(7):hover{transform:rotateY(240deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(8):hover{transform:rotateY(280deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(9):hover{transform:rotateY(320deg) translateZ(280px) scale(1.2);
}@keyframes photo{0%{transform:rotateX(-30deg) rotateY(0deg);}100%{transform:rotateX(-30deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
<img src="img/9.jpg" alt=""/></div>
</div>
<audio src="music/你的答案.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<script>var bgmusic = document.getElementById('bgmusic');bgmusic.addEventListener('canplay', function(){this.play();}, false);window.addEventListener('load', function(){window.addEventListener('touchstart', once, false);}, false);function once(){bgmusic.play();window.removeEventListener('touchstart', once, false);}</script>
</body></html>
同樣把代碼里的圖片文件和音樂文件改成你自己的就好了
最終效果
可以把倆個頁面錄制成小視頻，再通過一些視頻編輯軟件添加字幕，添加背景音樂，再添加點效果，就能做出非常有意義的小視頻了。本人用的視頻編輯用的是剪映，很方便。個人覺得剪一些小的視頻用不到Pr那么大的軟件。
旋轉相冊
總結
以上是生活随笔為你收集整理的正方体3D旋转相册的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
