CSS 座标系统如下,上下是 y 轴的,往上小於 0 (-y) ,得下大於 0 (+y) ,左右是 x 轴,右边是正数 (+x),左边是负数 (-x), 最后是 z 轴,往萤幕的方向是负数 (-z),往 user 的方向是正数 (+z)。
CSS Translate 3D
再来我们要先认识 translate 的行为,这样才能知道整个座标系统 ,translate3d (x ,y ,z) 有三个参数,分别是 x, y, z 三轴的移动距离,当 x = 10px ,代表物件会在 x 轴上往右移动 10px 。
transform: translate3d(x, y, z)
看下面的 Demo ,我使用 css 中的 transform: translate3d(x, y, z)
来测试三个轴的移动方向, x , y 轴的移动很简单,就只是上下,左右的移动,重点在於 z 轴的方向,范例中我刻意把中心点标出来,中间有一个白点,主要是为了更清楚的看出物件在 z 轴上的移动,当物件往 -z 的方向移动,物件的距离变远了,所以物件的尺寸会变小,而当物件往 +z 的方向移动,物件的尺寸就会变大。
CSS rotate 3D
rotate3d 是用来做 3D 旋转的 CSS 属性,它有四个参数要设定,(x, y, z) 三个值与 原点 (0, 0, 0) 形成的一条线,称为旋转轴,物件会对著该轴来做旋转,而 第四个参数 degree 则是旋转角度。
transform: rotate3d(x, y, z, degree)
在实作 3D 旋转前,我们还要先了解,物件是对著什么东西旋转,一般在 2D 的画面中,物件是要对著某一个点旋转,而在 3D 画面则是要对著某一条线来旋转,也就是刚提到的旋转轴,下面这个范例,分别实做了对著 x 轴、 y 轴、 z 轴来做旋转。
上个范例可以看出,物件只是在原地旋转,因为物件的中心点 (0, 0, 0),刚好就在旋转轴上,不管对著 x, y ,z 哪个轴旋转,中心点 (0, 0, 0) 都被这三个轴穿过,所以物件旋转的时候,中心点是不会变动的。
所以我们要改变物件的中心点,让他呈现出 3D 旋转的效果,我使用 translate3d(0, 0, -150px)
,把物件往 -z 轴移动 150 px,再让这个物件对著 y 轴旋转,看下面这个范例,如果我们把原点 (0, 0, 0) 当成 太阳,那么目前旋转的物件就像地球一样,对著太阳旋转 。
不管是 rotate3d 或是 translate3d ,都要写在 transform 这个 CSS 属性里,必须使用空白来分隔这两个效果。
transform: rotate3d(0, 1, 0 , 30deg) translate3d(0, 0, -150px);
下一篇文章将实作一个立体正方形。
目前回應 Comments(2 comments)
OWOEOMO 2020/04/14
讚,全都是想要的效果跟解釋
ahong 2019/11/07
博客写的很好 图文并茂好生动赞