CSS transform属性实现旋转的四面体
2019-08-05 本文已影响0人
来碗鸡蛋面
原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：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文件做引用，并定义好元素间的关系。
<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部分，这里拼成了一个四面体，关键点见代码注释。
.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)
})()
