原創(chuàng)聲明
本文系作者辛苦碼字所得，歡迎分享和轉(zhuǎn)載，但請在明顯位置注明作者的如下信息：
筆名：來碗雞蛋面
簡書主頁：http://www.reibang.com/u/4876275b5a73
郵箱：job_tom@foxmail.com
CSDN ID：tom_wong666
本文簡單闡述了如何實現(xiàn)旋轉(zhuǎn)的四面體效果寻咒，讀者需要具備基本的HTML，CSS和JS基礎知識。
一，基本概念：
1靡馁，三維坐標軸，如下圖：
三維坐標
2机久，透視距離臭墨，如上圖：
perspective：npx:透視距離為npx。
3膘盖，CSS的3D轉(zhuǎn)換屬性
transform：rotateX(ndeg)：繞X軸旋轉(zhuǎn)n度胧弛。如下圖：
X軸旋轉(zhuǎn)示意
transform：rotateY(ndeg)：繞Y軸旋轉(zhuǎn)n度。如下圖：
Y軸旋轉(zhuǎn)示意
transform：rotateZ(ndeg):繞Z軸旋轉(zhuǎn)n度侠畔。如下圖：
Z軸旋轉(zhuǎn)示意
二结缚，基本思路
用四張尺寸相同的圖片以絕對定位重疊在一起，然后以4*90度旋轉(zhuǎn)拼成一個四面體践图，接著用一個父元素包裹四張圖片掺冠，旋轉(zhuǎn)父元素，實現(xiàn)四面體的旋轉(zhuǎn)码党。
三德崭，代碼實現(xiàn)
1，HTML部分揖盘，注意這里要對cs和js文件做引用眉厨，并定義好元素間的關(guān)系。
<head>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="banner">
<div id="stage">
<img id="img1" src="img/01konglong.jpg"></img>
<img id="img2" src="img/02yuer.jpg"></img>
<img id="img3" src="img/03tuzi.jpg"></img>
<img id="img4" src="img/04guangtou.jpg" ></img>
</div>
</section>
<script src="js/index.js"></script>
</body>
2兽狭，CSS部分憾股，這里拼成了一個四面體，關(guān)鍵點見代碼注釋箕慧。
.banner{
margin-top:250px;
margin-left:350px;
width:960px;
height:200px;
perspective:300px;/*定義視距*/
}
.banner #stage{/*父元素*/
position:relative;
width:960px;
height:200px;
transform-style:preserve-3D;/*定義樣式為3D*/
transition:all 1s;
transform:rotateX(0deg);/*父元素初始旋轉(zhuǎn)為0度*/
}
.banner #stage #img1{/*圖1*/
width:960px;
height:200px;
position:absolute;
transform:translateZ(100px);/*圖片1前移100像素服球，未旋轉(zhuǎn)*/
transition:all 1s;
}
.banner #stage #img2{/*圖2*/
width:960px;
height:200px;
position:absolute;
transition:all 1s;
transform:rotateX(-90deg) translateZ(100px);
/*圖片2前移100像素，X軸旋轉(zhuǎn)-90度*/
}
.banner #stage #img3{/*圖3*/
width:960px;
height:200px;
position:absolute;
transition:all 1s;
/*圖片3前移100像素颠焦，X軸旋轉(zhuǎn)-180度*/
}
.banner #stage #img4{/*圖4*/
width:960px;
height:200px;
position:absolute;
transition:all 1s;
transform:rotateX(-270deg) translateZ(100px);
/*圖片2前移100像素斩熊，X軸旋轉(zhuǎn)-270度*/
}
3，JS部分伐庭，這里加了一個定時器粉渠，實現(xiàn)父元素勻速往復旋轉(zhuǎn)。
"use strict"
let stage=document.getElementById("stage");
let imgs=stage.querySelectorAll(".light #stage>img");
(function(){
let k=90;
setInterval((function task(){
stage.style.transform=`rotateX(${k}deg)`;
k+=90;
}),1000)
})()
