圖片鎮樓：
聲明：本來想做一個多面體相冊的，但是在網上沒有找到例子，最終完整代碼是在一個英文程序網站上copy的，但是沒有解釋，我把大體實現流程解釋了一遍，旋轉真的是繞蒙我了····代碼：
<!DOCTYPE html>
<html>
<head>
<title>二十面體</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background: rgba(0, 0, 0,1);
}
.sharp {
animation: ani 4s linear infinite;
}
div {
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg);
position: absolute;
left: 50%;
top: 50%;
}
span { /*利用邊框做一個三角形*/
border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每個span下方設置顏色，其餘邊透明*/
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -346.4px;
}
span:before { /*利用邊框在span中做一個三角形，實現嵌套，讓span變成邊框,span:before變成要顯示的東西*/
content: '';
border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*設置每面的顏色*/
border-width: 165.2px 92px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 4px;
}
div span:nth-child(1) {
transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(2) {
transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(3) {
transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(4) {
transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(5) {
transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}
.sharp div:nth-child(1) {
transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(2) {
transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(3) {
transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(4) {
transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(5) {
transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}
@keyframes ani {
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="sharp">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
代碼大體解讀
一、
span { /*利用邊框做一個三角形*/
border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每個span下方設置顏色，其餘邊透明*/
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -346.4px;
}
span:before { /*利用邊框在span中做一個三角形，實現嵌套，讓span變成邊框,span:before變成要顯示的東西*/
content: '';
border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*設置每面的顏色*/
border-width: 165.2px 92px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 4px;
}
先用一個0寬0高的盒子，將盒子的邊框設置寬度
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
再將左 上 右顏色屬性變爲透明
border-color: transparent transparent blue transparent;
左 上 右都會看不見，就只剩下下邊的，這樣就變成一個三角形了
span:before 就是在三角形上在加一個三角形起到duo多出一個像邊框的效果
二、
一個div中有五個span，那麼通過上一步就做成了五個三角形，將這五個三角形進行3D位移加旋轉
html
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css
div span:nth-child(1) {
transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(2) {
transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(3) {
transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(4) {
transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(5) {
transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}
變成這樣 蓋子一共由五個三角形組成
三、將上步的div做一個整體的3d變換
.sharp div:nth-child(1) {
transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}
四、
在HTML中再加一個div，也進行整體移動，兩者有重合的三角形
.sharp div:nth-child(2) {
transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}
五、
再加三個div，繼續變換，最終只差一個蓋了
.sharp div:nth-child(3) {
transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(4) {
transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(5) {
transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}
六、
在加一個div，不用變換，因爲本來的位置就是蓋
七、最後加個旋轉動畫就可以了