稻草日志分享: css3中transform中的3d转换rotate3d的使用方法

王亚兵8个月前 (10-26)HTML5CSS3349

通过亲啊面的文章,我想打击啊都已经知道如何使用我们的3d转换中的3d旋转。其实除了rotateX,rotateY,rotateZ之外,其实还有一个在web前端开发中不经常用到的属性是roatate3d这个可不是三个的简写。因为在这个属性中需要写桑格值。起那三个分别是x,y,z的矢量。后面是度数。下面给大家说下用法。

其实我们是可以用rotate3d表示我们之前的效果,比如是绕着x轴旋转45读。我们只需要写成rotate3d(1,0,0,45deg)就可以了。可以这么理解前面的代表方向。后面代表度数。也就是说亲前面的数值是控制我们我们旋转轴的一个方向。如图:

css3中transform中3d旋转rotate3d用法

同样的如果我们想通过rotate3d实现y轴旋转,以及z轴旋转只需要把其他位置上的数值改为0就可以了。后面的度数改成你想要的。很多人会有这样的疑问,就是如果同时给x和y轴同都有一个数值会发生什么?我们发现他是沿着x轴和y轴角平分线进行旋转的。所以效果是这样的。

css3中transform中3d旋转rotate3d用法

当然这个如果咱们想更加深入的了解,可以去学一下矢量。这个我们就不和大家讲了,因为我也不是很了解。不过你多试几次可能就了解其中的奥秘了。我们只需要注意下面这几点就可以l了。

首先我们的rotate3d不是rotateX,rotateY,rotateZ的简写,虽然rotate3d是可以实现x,y,z轴的单独旋转。但是,一般情况下我们只是使用它进行一些他叔角度的旋转。一般情况下是用不到的。另外他有四个值。前面三个值可以理解是定义旋转轴的。最后就是只要是3d效果肯定离不开我们的perspective透视属性,不然不会出现3d效果的。

好了希望大家通过稻草日志的分享,了解transform中3d旋转属性rotate3d的用法以及与我们rotateX,rotateY,rotateZ的区别。注意在使用rotate3d时需要注意的问题。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。