稻草日志分享:css3中的3d旋转效果,rotateY和rotateZ的用法

王亚兵8个月前 (10-24)HTML5CSS3372

通过上一篇文章的分享,我想大家已经了解了如何使用transform中的totateX值来实现我们web前端开发中的3d旋转效果。同样我们提到了其实所谓的3d旋转不是围绕某个点进行旋转的。而是围绕某个轴进行旋转。所以很容易想到,除了rotateX之外。还有rotateY和totateZ。今天我们门就和大家聊一下如何进围绕y轴和z轴旋转。

我们还利用昨天的那个div,改一下旋转轴看下效果让它沿着y轴旋转。此时我们感觉他像极了旋转木马。其实我们应该注意他的旋转方向,同样的如果是正数,那么她就是从外向里转的。如果负数他的旋转方向是相反的。

css3中3d旋转rotateY和rotateZ

如果我们把rotateY改成z轴旋转会是什么效果呢?其实我们发现他和2d的旋转没有什么变化。其实是可以理解的。在前敏介绍3d坐标轴的时候就说过、z轴式垂直于平面的。这说明他和屏幕只有一个焦点。而我们的元素是平铺在屏幕上的,所以页面元素围绕z轴旋转。就是和我们的2d效果一样。

css3中3d旋转rotateY和rotateZ

希望今天的分享我们能了解如何让我们的页面元素围绕着y轴和z轴旋转。另外注意的是不能直接在rotate3d这个属性内写三个值。明天的分享我们来看一下rotate3d到底该如何写。

发表评论

访客

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