服务热线:13814106501

transform 返回

/***  transform ***/

transform可以实现四种功能:旋转、缩放、倾斜以及移动

1、旋转

使用rotate方法来实现对文字或图像的旋转处理,在参数中指定旋转度数。比如rotate(50deg)。

rotate3D(x,y,z,angle);(x,y,z的系数是0~1)

rotate3D(1,1,1,45deg);


2、缩放

使用scale方法来实现文字或图像的缩放处理,在参数中指定缩倍率。比如scale(0.5),表示缩小50%。

此外,可以分别指定元素水平方向和垂直方向的缩放。比如scale(0.5,2)表示水平方向缩小50%,垂直方向放大一倍。


3、倾斜

使用skew方法来实现文字或图像的倾斜处理,在参数中分别指定水平方向和垂直方向的倾斜角度,比如skew(30deg,30deg),表示水平与垂直方向上各倾斜30度。

此外,skew了可以省略一个参数,此时水平方向上会倾斜,垂直方向上不倾斜比如skew(30deg)。


4、移动

使用translate方法来实现文字或图像的移动处理,在参数中分别指定水平方向和垂直方向的移动距离,比如translate(50px,50px),表示水平与垂直方向上各移动50个像素。

此外,translate了可以省略一个参数,此时水平方向上会移动,垂直方向上不移动。比如translate(50px)。

translate2D(x,y);

translate3D(x,y,z);

translate-arigin:center center;(图片的旋转都是按照圆心点旋转的,translate-arigin可以定义图片的旋转点)


通过transform对一个元素使用多种变形方式

例子1:transform: rotate(45deg) scale(1.5) translate(150px,200px);  例子2:transform: translate(150px,200px) scale(1.5) rotate(45deg);

例子1是先旋转45度,然后放大1.5倍,最后移动;例子2只是将例子1的位置改变下,先移动后放大最后旋转;虽然数值相同,但由于位置不同的缘故,在浏览器中的样子是会不同的



指定变形的基准点

在transform方法进行文字或图像的变形时,是以元素的中心为基准点的。使用transform-origin属性可以改变元素的基准点。比如transform-origin:left bottom,以元素的左下角为基准点。


×
确定 取消
×
登录●注册
个人中心
登录
注册
重设密码
×

用户登录

×

用户注册

请用微信扫描,将为您自动生成账号 →
欢迎咨询 您本次的消息将以邮件方式发送给我们