首先先放上效果圖（就一個截圖，沒辦法詮釋盒子的翻轉）：
接下來是結構，img放你喜歡的歌星的圖片，music放mp3文件：
3d.html代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
margin: auto auto;
width: 300px;
height: 300px;
background: green;
position: fixed;/* 固定定位 */
top: 0;left: 0;right: 0;bottom: 0;
/* 3d轉換 */
transform-style: preserve-3d;
transform: rotateX(20deg) rotateY(20deg);
/* 調用c3動畫屬性 */
animation: suibian 10s linear infinite 2s;/* 第三個元素不寫就是逐張,第四個默認一次,第五個延遲執行 */
}
#box>img{
position: absolute;/* 絕對定位根據有定位屬性的父元素進行定位，若父元素沒有定位屬性則根據body進行定位，層級發生改變，原有位置不保留 */
width: 100%;height: 100%;/* 100%也是繼承,父親有多少就繼承多少 */
background: black;
}
/* 子節點查找 僞類選擇器*/
#box img:nth-child(1){/* 前 */
transform: translateZ(150px);/* 向Z軸平移2分之一 */
}
#box img:nth-child(2){/* 後 */
transform: rotateX(-180deg) translateZ(150px);
}
#box img:nth-child(3){/* 左側 */
transform: rotateY(-90deg) translateZ(150px);
}
#box img:nth-child(4){/* 右側 */
transform: rotateY(90deg) translateZ(150px);
}
#box img:nth-child(5){/* 上 */
transform: rotateX(-90deg) translateZ(150px);
}
#box img:nth-child(6){/* 下側 */
transform: rotateX(90deg) translateZ(150px);
}
/* 定義c3動畫 */
@keyframes suibian{
from{}
to{transform: rotateX(380deg) rotateY(740deg);}
}
</style>
</head>
<body>
<marquee><!-- 讓裏面的文本自動滾屏 -->
<h1 id="mn">點擊圖片播放音樂</h1>
</marquee>
<div id="box">
<!-- img[src="img/$.png"]*6 -->
<img name="music/1.mp3" src="img/1.png" alt="">
<img name="music/2.mp3" src="img/2.png" alt="">
<img name="music/3.mp3" src="img/3.png" alt="">
<img name="music/4.mp3" src="img/4.png" alt="">
<img name="music/5.mp3" src="img/5.png" alt="">
<img name="music/6.mp3" src="img/6.png" alt="">
</div>
<!-- // audio音頻 -->
<audio id="music" autoplay="autoplay" src=""></audio><!-- autoplay自動播放 -->
</body>
<script type="text/javascript">
var img = document.getElementById('box').children;
var music = document.getElementById('music');
var mn = document.getElementById('mn');
for(let i=0;i<img.length;i++)
{
img[i].onclick = function(){
music.src = this.name;
mn.innerText = this.name.substring(this.name.indexOf("/")+1);
}
}
</script>
</html>