xyz坐标轴
最编程
2024-04-01 12:51:53
...
“这是我参与更文挑战的第6天，活动详情查看： 更文挑战”
效果：
[图片]
先来看xyz坐标轴的位置
默认状态下，坐标原点在元素中心点，即：
transform-origin: 50% 50% 0;默认值
画图是这样的：z轴垂直屏幕向外，xyz轴的方向是符合左手螺旋定律的（中学物理电磁场那块内容），大拇指指向是z轴正方向，其余四指自然握紧，从x轴正方向转向z轴正方向
大概这样：弯弯的那个指向是判断xyz是否符合左手螺旋定则时手旋转的方向
[图片]
所以当我们把盒子沿着y轴旋转一点角度，坐标轴变成了这样：
x轴变成朝里面旋，z轴从垂直屏幕向外朝右边旋
[图片]
图片沿y轴是这样子转的：
[图片]
大概这样子
这时候，如果要盒子往前走，应该是translateZ，
[图片]
此处为了效果明显，又加了一个demo的图片，并设置position，left和top为0，让两张demo在一行，要不然d...... 查看更多
上一篇： Unity 雪着色器
下一篇： xyz坐标系