CSS3-转换之rotate

在讲解之前,我们先将我们要变换的元素看做一个正方体,为了方便理解,我标注了X、Y、Z轴以及方向,如下图:
这里写图片描述

1、rotateX(angle)

定义沿着X轴的3D旋转
这里写图片描述 这里写图片描述
如上图,第一张为俯视图,第二张是3D视图。
沿X轴顺时针旋转30度,它俯视图的宽度应该为(width*cos(pi/6))。

2、rotateY(angle)

定义沿着y轴的3D旋转
这里写图片描述 这里写图片描述
如上图,第一张为俯视图,第二张是3D视图。
沿X轴顺时针旋转30度,它俯视图的长度度应该为(height*cos(pi/6))。

3、 rotateZ(angle)

定义沿着z轴的3D旋转
这里写图片描述
沿着z轴顺时针旋转30度,它的长度和宽度是不变的,就相当于你转动了一个方形的转盘,它的方向沿着顺时针方向转30度。

4、rotate(angle)

定义2D旋转,正值顺时针,负值逆时针,使元素旋转,但是不变形
这里写图片描述
俯视图和3D视图相同,它是2D旋转,即在平面旋转,效果和rotateZ(angle)相似。

5、rotate3d(x,y,z,angle)

定义3D旋转。
x表示x方向的矢量;
y表示y方向的矢量;
z表示z方向的矢量;
angle表示旋转角度。
查看资料:有的显示x、y、z的值取0~1之间,但是经过测试,0表示不旋转,1表示旋转;
rotateX(angle)相当于rotate3d(1,0,0,angle);
rotateY(angle)相当于rotate3d(0,1,0,angle);
rotateZ(angle)相当于rotate3d(0,0,1,angle)。
理解示例如下:
这里写图片描述 这里写图片描述
如上图,第一张为俯视图,第二张是3D视图。
rotate3d是沿着x、y、z方向各旋转30度,从俯视图和3D视图可以明显看出,不做多的解释。

6、rotate3d(1,1,0,angle)

我们最后再看一个只在X和Y轴方向旋转的例子,如下图:
这里写图片描述 这里写图片描述
如上图,第一张为俯视图,第二张是3D视图。
原理如上。

如有错误,请道友指正,非常感谢!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值