• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

带你理解transform:rotate(含三维视图)

互联网 diligentman 2周前 (10-14) 12次浏览

前言

最近在练习的时候常常需要使用CSS3属性transform:rotate,到底X轴,Y轴,Z轴如何旋转的,纠结了半天,终于还是实践得真知,写下这篇文章希望可以帮助大家,如果有说错的地方欢迎指正,欢迎补充,欢迎交流

关于rotate的基本使用本文不多赘述,不认识这个属性的朋友可以先看W3C对该属性的介绍

本文主要谈谈对该属性旋转的理解

参考从css 3d说到空间坐标轴

首先我们从人体的角度感性层面来理解这三个轴

1. 感性层面理解

1.1 X轴

带你理解transform:rotate(含三维视图)

X轴的旋转好比人在平地不停地后空翻

2.2 Y轴

带你理解transform:rotate(含三维视图)
Y轴的旋转好比人在平地不停地转身(不说转圈是因为怕引起歧义)

2.3 Z轴

带你理解transform:rotate(含三维视图)

是不是很像飞行员的训练项目?

带你理解transform:rotate(含三维视图)

2. 理想层面理解

有了上面的认识之后接下来就好理解了,我们先来看由这三条轴构成的三维坐标图

带你理解transform:rotate(含三维视图)

我们再来把刚才的旋转代入到这个坐标中,是不是很好理解了。仔细的读者会注意到我增加的角度一直是正数,其实旋转的正角度和负角度是有规则的,看到一些文章指出,当rotate的值为正时,各轴按顺时针旋转,反之按逆时针旋转,根据我的实验,其实是错误的,由于官方没有对此相应的描述,这里我们可以使用左手螺旋法则(还记得物理学过的右手螺旋法则吗,哈哈)

伸出左手,大拇指指向正轴方向,四个手指的指向即是旋转正向,但务必记住是左手!

这里要强调两点:左手正轴

一定要是使用左手的大拇指指向正轴的方向,我们才可以得到旋转的正向(旋转角度为正的方向)

3. C4D三维空间视图

这里用C4D建模工具为读者展示三维XYZ轴的旋转

我们分别在各轴旋转正的60度,效果如图所示(X轴是轴,Y轴是绿轴,Z轴是蓝轴)

transform: rotateX(60deg) rotateY(60deg)  rotateZ(60deg);

带你理解transform:rotate(含三维视图)


喜欢 (0)