原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：

笔名：来碗鸡蛋面

简书主页：https://www.jianshu.com/u/4876275b5a73

邮箱：job_tom@foxmail.com

CSDN ID：tom_wong666

本文简单阐述了如何实现旋转的四面体效果，读者需要具备基本的HTML，CSS和JS基础知识。

一，基本概念：

1，三维坐标轴，如下图：

三维坐标

2，透视距离，如上图：

perspective：npx:透视距离为npx。

3，CSS的3D转换属性

transform：rotateX(ndeg)：绕X轴旋转n度。如下图：

X轴旋转示意

transform：rotateY(ndeg)：绕Y轴旋转n度。如下图：

Y轴旋转示意

transform：rotateZ(ndeg):绕Z轴旋转n度。如下图：

Z轴旋转示意

二，基本思路

用四张尺寸相同的图片以绝对定位重叠在一起，然后以4*90度旋转拼成一个四面体，接着用一个父元素包裹四张图片，旋转父元素，实现四面体的旋转。

三，代码实现

1，HTML部分，注意这里要对cs和js文件做引用，并定义好元素间的关系。

2，CSS部分，这里拼成了一个四面体，关键点见代码注释。

.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);/*父元素初始旋转为0度*/

}

.banner #stage #img1{/*图1*/

width:960px;

height:200px;

position:absolute;

transform:translateZ(100px);/*图片1前移100像素，未旋转*/

transition:all 1s;

}

.banner #stage #img2{/*图2*/

width:960px;

height:200px;

position:absolute;

transition:all 1s;

transform:rotateX(-90deg) translateZ(100px);

/*图片2前移100像素，X轴旋转-90度*/

}

.banner #stage #img3{/*图3*/

width:960px;

height:200px;

position:absolute;

transition:all 1s;

/*图片3前移100像素，X轴旋转-180度*/

}

.banner #stage #img4{/*图4*/

width:960px;

height:200px;

position:absolute;

transition:all 1s;

transform:rotateX(-270deg) translateZ(100px);

/*图片2前移100像素，X轴旋转-270度*/

}

3，JS部分，这里加了一个定时器，实现父元素匀速往复旋转。

"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)

})()