为啥我还要调整沿Y轴的移动才能达到效果

为啥我还要调整沿Y轴的移动才能达到效果

如果仅仅是按任务要求的,

第一步 绕着X轴让三个正方形后仰

第二步 沿着它们的Z轴移动 红色往上移动,蓝色的向下移动

但此时明显在下面的盒子 要更远离我们 还需要让他们沿着Y轴 出来才能和题目的效果一致


​相关代码:
​<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>空间移动</title>
<style>
* {
margin: 0;
padding: 0;
}

.box {
width: 200px;
height: 200px;
margin: 200px auto;
perspective: 300px;
position: relative;
}

.box p {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}

.red{
background-color:red;
transform: rotateX(63deg) translateZ(118px) translateY(0px);
}
.green{
background-color:green;
transform: rotateX(67deg) translateZ(90px) translateY(14px);
}
.blue{
background-color:blue;
transform: rotateX(74deg) translateZ(50px) translateY(32px);
}

/* 补充代码 */
</style>
</head>
<body>
<div class="box">
<p class="red"></p>
<p class="green"></p>
<p class="blue"></p>
</div>
</body>
</html>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
慕仔8542068 2021-03-09 07:15:29

是因为角度的原因,你可以多调整一下旋转的角度值,还有位置偏移值,就可以做到如效果一样的图了。

卡布琦诺 2021-03-07 10:56:37

同学你好,测试同学的代码,不设置y轴的移动,也可以实现效果,如下图所示:

http://img1.sycdn.imooc.com//climg/604440110976b04c17960934.jpg

进行空间移动后,每个色块的大小与效果图不太一样,是因为空间移动大小与旋转角度设置不太合理导致的,建议参考如下图设置:

    ​http://img1.sycdn.imooc.com//climg/604440bc096aa3c910950415.jpg

另外,这个没有固定的计算方法,是需要慢慢调试的哟

祝学习愉快!

好帮手慕张 2021-03-06 11:24:50

同学你好,代码效果实现是正确的,同学的理解也是正确的,继续加油。祝学习愉快!

  • Y轴为什么会有数值的呢?

    2021-03-06 22:49:50
烟波皓渺 提问者 2021-03-05 23:49:59

我想了一下,我大概知道原因了  三个盒子并没有完全放倒,所以沿此时的Z轴移动 并不是 垂直向上或向下的

  • 那也是跟x轴的倾斜度有关吧,跟Y轴有什么关系?

    2021-03-06 22:51:31
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师