巧用左手判断CSS中transform：rotate旋转方向

在制作网页的过程中，我们会经常让元素进行旋转，来形成一定的立体感，或是配合关键帧（@keyframe）做成动画特效，使得页面更加美观。
在css3中我们可以借助transform:rotate();来实现元素的旋转。
在默认状态下，角度为正值时，元素绕z轴顺时针旋转。

transform: rotate(45deg);//绕z轴顺时针旋转45°

对初学者来说，元素在平面上旋转还是比较容易判断方向，但是在三维空间就比较困难了。
还记得以前物理课本上用安培定则判断磁场方向么，类似的，空间想象能力较弱的朋友可以借助左手来判断图片旋转方向。

使用方法：

轻握左手，大拇指指向旋转轴正方向，四指指向的方向就是旋转方向。

示例：

transform: rotateX(45deg)；//以x为轴顺时针旋转45°

预测图片旋转方向如箭头所示：

实际旋转情况：

使用时需要注意y轴是向下的

巧用左手判断CSS中transform：rotate旋转方向相关推荐

css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画
可重复使用的变数transition-timing-function 属性,比内置更强大ease ,ease-in ,ease-out 和ease-in-out . HTML CSS :root { ...
Transform.Rotate 旋转
function Rotate (eulerAngles : Vector3, relativeTo : Space = Space.Self) : void Description描述 Applie ...
css动画 transform 的旋转应用示例
属性: rolateX rolateY rolateZ 三个方向的旋转方向及角度 rolateX rolateZ 从正斜上方查看可以理解为顺时针旋转: rolateY 从正斜上方查看可以理 ...
CSS 中的 rotate
在 CSS 坐标系中,从左到右为 X 轴正方向,从上到下为 Y 轴正方向,从屏幕里到屏幕外为 Z 轴正方向. 当观察者视线方向顺着 X 轴正方向,rotateX 为正表示元素逆时针旋转,为负表示元素顺 ...
CSS中transform：skew属性理解
transform中通常用skew来对盒子进行倾斜.如下代码: #div{transform: skewY(10deg);} //对Y方向进行倾斜10度,意思是保留Y方向,将盒子沿着X方向进行倾斜. ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
html地球仪代码,html – 在CSS中旋转地球仪
我在CSS中创建一个旋转地球效果.我在CSS中创建了地球: body { background-color: #111; } #earth { width: 300px; height: 300px; ...

巧用左手判断CSS中transform：rotate旋转方向

巧用左手判断CSS中transform：rotate旋转方向相关推荐

最新文章

热门文章