3D⽴体照⽚墙—HTML
⽂章⽬录
1、CSS动画样式
2、HTML图⽚放置
前⾔
⾸先呢，要先理解⼏个重要知识点，然后梳理思路，构建3d盒⼦模型、3d动画执⾏程序以及将动画应⽤到元素、3d动画样式等
1、css动画样式
<1>⽤盒⼦模型作为载体，将动画应⽤到元素，代码如下：
>>>简易分析：
动画的样式，从⼀种样式渐变到，另⼀种样式中，使⽤css动画，必须先为动画指定⼀些关键帧，⽬的是为了保持元素在特定的时间内，完成所设定的样式。
.box{
width: 400px;
height: 400px;
margin-left: 500px;
margin-top: 150px;
position: relative;
transform-style: preserve-3d;
transform-origin: 200px 200px 200px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation-name: kuli;
animation-duration: 10s;
animation-iteration-count: infinite;
# animation: kuli 10s ease infinite;
}
>>>代码包含⼏个重要知识点：
/* 设置被嵌套元素以3D样式显⽰ */
transform-style: preserve-3d;
/* 设置3D元素的位置 */
transform-origin: 200px 200px 200px;
/* 通过rotate()⽅法，3D元素围绕着X、Y、Z轴给定的度数进⾏旋转 */
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
/* 设置3d动画执⾏名称 */
animation-name: kuli;
/* 指定动画完成⼀个循环需要多长时间 */
animation-duration: 10s;
/* infinite 设置动画永远运⾏（如死循环） */
animation-iteration-count: infinite;
/* ease 指定动画的速度曲线慢>快>慢 */
/* linear 指定从开始到结束具有相同速度的动画效果（匀速变化） */
/
* 下⾯的样式 ease 可以换为 linear */
# animation: kuli 10s ease infinite;
<2>@keyframes动画代码，代码如下：
>>>简易分析：
@keyframes：在指定css样式中，动画在特定的时间内，是从⼀种样式渐变为另⼀种样式，在这渐变之前，要先使动画⽣效，即必须将动画绑定到所属元素当中，在代码当中将 “kuli”动画绑定到元素，动画是持续10秒， 当动画完成20%、40%、60%、80%时围绕着x、y、z轴改变旋转度数，直到100%时，再次更改，并重复
@keyframes kuli{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
20%{
transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
}
40%{
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);
}
60%{
transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);
}
80%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
<3>标签样式及图⽚样式，代码如下：
.box div{
width: 400px;
height: 400px;
position: absolute;
}
.
box div img{
width: 400px;
height: 400px;
/* ⾏内元素垂直⽅向的对齐，注意区别于块元素垂直⽅向的对齐 */
vertical-align: top;
}
.box div:nth-child(2){
transform-origin: 0 0;
transform: rotateY(-90deg);
}
.box div:nth-child(3){
/
* 被转换3D元素的位置 */
transform-origin: 400px 0;
transform: rotateY(90deg);
}
.box div:nth-child(4){
transform-origin: 0 0;
transform: rotateX(90deg);
}
.box div:nth-child(5){
transform-origin: 0 400px;
transform: rotateX(-90deg);
}
.box div:nth-child(6){
/* 转换属性，定义3D转化，仅⽤于Z轴 */
transform: translateZ(400px);
}
2、html图⽚放置
* 注意图⽚的放置，⾃⼰可以选择所喜欢的类型，放在⽂件夹所创建的⽬录⾥⾯即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d正⽅体⽴体照⽚墙</title>
<link rel="stylesheet" href="css/box.css">
</head>
<body>
<div class="box">
<div><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
<div><img src="img/04.jpg" alt=""></div>
<div><img src="img/05.jpg" alt=""></div>
<div><img src="img/06.jpg" alt=""></div>
</div>
</body>
</html>
>>>整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d⽴体照⽚墙</title>
<style type="text/css">
/
* ⽤盒⼦模型作为载体，将动画应⽤到元素 */
.box{
width: 400px;
height: 400px;
margin-left: 500px;
margin-top: 150px;
position: relative;
transform-style: preserve-3d;
transform-origin: 200px 200px 200px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation-name: kuli;
animation-duration: 10s;
animation-iteration-count: infinite;
animation: kuli 10s ease infinite;
}
/* @keyframes动画代码 */
@keyframes kuli{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
20%{
transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
}
40%{
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);    }
60%{
transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);    }
80%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);    }
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);    }
}
.box div{
width: 400px;
height: 400px;
position: absolute;
}
.box div img{
width: 400px;
height: 400px;
/* ⾏内元素垂直⽅向的对齐，注意区别于块元素垂直⽅向的对齐 */    vertical-align: top;
}
.box div:nth-child(2){
transform-origin: 0 0;
transform: rotateY(-90deg);
}
.box div:nth-child(3){
/* 被转换3D元素的位置 */
transform-origin: 400px 0;
transform-origin: 400px 0;
transform: rotateY(90deg);
}
.box div:nth-child(4){
transform-origin: 0 0;
transform: rotateX(90deg);
}
.box div:nth-child(5){
transform-origin: 0 400px;
transform: rotateX(-90deg);
}
.box div:nth-child(6){
/* 转换属性，定义3D转化，仅⽤于Z轴 */    transform: translateZ(400px);
rotate属性
}
</style>
</head>
<body>
<div class="box">
<div><img src="img/01.jpg" alt=""></div>  <div><img src="img/02.jpg" alt=""></div>  <div><img src="img/03.jpg" alt=""></div>  <div><img src="img/04.jpg" alt=""></div>  <div><img src="img/05.jpg" alt=""></div>  <div><img src="img/06.jpg" alt=""></div>  </div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。