稻草日志分享:css3中的transform属性中的3d旋转rotateX

王亚兵8个月前 (10-23)HTML5CSS3360

css3中的transform的3d移动其实我们看到效果不是很明显。在我们的web前端开发中除了前面说到的translate3d,最长用的就是transform的3d旋转效果。尤其是通过我们的animation动画会制作出很多炫酷的效果。接下来我们就和大家聊一下如何实现页面元素的3D旋转

再此之前,我们需要想一下,之前的rotate是让我们的元素绕着旋转中心旋转的。我们还可以通过transform-origin进行更改我们的变换中心。其实我们发现在2d旋转中,知识围绕点旋转某一个角度。他是有一个单位的读。deg度。而且如果数值是正的就是顺时针旋转,如果是负那就是逆时针。但是我们的3d旋转式围绕着坐标轴旋转的。所以他共有三种3d算转方式。

我们先给大家介绍第一种沿着x轴旋转。就是rotatex属性。他究竟有什么值得我们注意的地方呢?首先要知道3d的坐标轴。他是沿着x轴旋转肯定要先确定旋转方向。并且知道怎么样才能有立体感。其实3d旋转最重要的是在理解方面。


css3中transform转换3d旋转rotateX

我们发现上图中的变化,如果不说是旋转你可能是以为是他的高度发生了变化,其实不是其实他已经沿着旋转了,只是我们并没有进行透视也就是我们视距的设置。所以看起来不是那么立体。同样的我们给元素的父级一个perspective值,看下效果。

是不是马上就有立体感了,所以说只要使用3d效果,就不能忘记perspective这个属性,一旦忘记,效果就会不一样,很可能耽误你的工作效率。其实细心的同学发现了,如果是数值是正的。他是往里旋转的。那么如果是负的,她就会向外旋转。

xuanhuan3.gif

如上图,所以通过稻草日志的分享,我们今天初步了解了transform的3d旋转。以及知道了如何围绕x轴如何进行旋转。以及使用3d效果一定不要忘了perspective属性。

发表评论

访客

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