HTML动画XYZ轴的⽤法详解HTML动画XYZ轴的⽤法详解
我将通过创建⼀个旋转的正⽅体讲解H5 xyz轴的具体⽤法
⾸先定义⼀个盒⼦，盒⼦内先放⼀张平⾯(后⾯会根据这张平⾯弄
出六个⾯使其成为⼀个正⽅体)
复制并打开代码你会看到⼀个正⽅体在旋转，不要着急，马上带你分析代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
@keyframes zhuan{
from{
transform:rotateY(0);
}
50%{
transform:rotateY(190deg)rotateX(45deg);
}
to{
transform:rotateY(360deg);
}
}
#box{
position: relative;
width: 300px;
height: 300px;
/*border: 1px red solid ;*/
text-align: center;
margin: 100px auto 0;
font-size: 100px;
line-height: 300px;
transform-style: preserve-3d;
animation: zhuan 5s linear infinite;
}
#box>div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
}
#box>div:nth-child(1){background: yellow;transform:translateZ(150px)}
#box>div:nth-child(2){background: lightgreen;transform:translateZ(-150px)rotateY(180deg)}
#box>div:nth-child(3){background: lightcoral;transform:rotateY(90deg)translateZ(150px)}
#box>div:nth-child(4){background: lightblue;transform:rotateY(-90deg)translateZ(150px)}
#box>div:nth-child(5){background: lightgoldenrodyellow;transform:rotateX(-90deg)translateZ(-150px)rotateY(180deg)}
#box>div:nth-child(6){background: lightgrey;transform:rotateY(-180deg)translateY(150px)rotateX(-90deg)rotateZ(180deg)}
</style>
<body>
<div id="box">
<div>前</div>
<div>后</div>
<div>右</div>
<div>左</div>
<div>上</div>
<div>下</div>
</div>
</body>
</html>
我的思路是这样的…
1.创建⼀个盒⼦
要给这个盒⼦中要插⼊很多div标签，每个div标签都要是⼀个平⾯,
⽤来组成这个正⽅体。所以要给⼤盒⼦中设置⼀些共有属性，并且
必须在盒⼦中打开3d开关，否则实现不了3d的旋转
对应代码:
#box{
rotate属性position: relative;
width: 300px;
height: 300px;
/*border: 1px red solid ;*/
text-align: center;
margin: 100px auto 0;
font-size: 100px;
line-height: 300px;
transform-style: preserve-3d;
animation: zhuan 5s linear infinite;
}
#box>div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
}
2.设置旋转
为什么要设置旋转呢?因为我要通过旋转来调试我得接下来操作
xyz轴是否正确，也就是每个⾯是否到了应该去的位置(就跟拼拼图
类似)。通过旋转我能观察到我的正⽅体成型情况，以⽅便进⾏修
改代码。
对应代码:
@keyframes zhuan{
from{
transform:rotateY(0);
}
50%{
transform:rotateY(190deg)rotateX(45deg);
}
to{
transform:rotateY(360deg);
}
}
3.开始"拨弄"XYZ轴，将每个div对应的⾯拼出⼀个正⽅体
先看代码吧
#box>div:nth-child(1){background: yellow;transform:translateZ(150px)}
#box>div:nth-child(2){background: lightgreen;transform:translateZ(-150px)rotateY(180deg)}
#box>div:nth-child(3){background: lightcoral;transform:rotateY(90deg)translateZ(150px)}
#box>div:nth-child(4){background: lightblue;transform:rotateY(-90deg)translateZ(150px)}
#box>div:nth-child(5){background: lightgoldenrodyellow;transform:rotateX(-90deg)translateZ(-150px)rotateY(180deg)}
#box>div:nth-child(6){background: lightgrey;transform:rotateY(-180deg)translateY(150px)rotateX(-90deg)rotateZ(180deg)}
看完代码是不是很萌币?再明确⼀个点，那就是只设置⼦代1时带红框的⽩⾊⾯(也就是下⾯的蓝⾊⾯)其实是最初始的位置,6个⾯的位置上都是根据这个原始⾯进⾏调整位置的,xyz轴的布局如下。
只设置⼦代1:
为了观察设置了旋转，我们能看出黄⾊⾯与原始⾯产⽣了⼀块距离,⽤到的属性transform: translateZ(150px)是在结合xyz轴看⼀下，黄⾊⾯果然是根据Z轴远离的，同理，后页⾯可与前页⾯类似。
这时候你可能会问，前后的页⾯解决了，那上下和左右怎么办？其实和简单，通过rotate属性将页⾯设
置旋转就可以了，再配合移动就可实现这么⼀个正⽅体了，后⾯的交给你们了，弄会了这个正⽅体，关于xyz轴的旋转应该就不是问题了。

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