首页 > 网站 > WEB开发 > 正文

transform实现文字或图像的变形处理

2024-04-27 15:07:15
字体:
来源:转载
供稿:网友

transform可实现四种文字或图像的变形处理,分别是旋转,缩放,倾斜,移动

旋转:

使用rotate,在参数中加入角度值,角度值后面跟表示单位的“deg”文字即可,旋转方向为顺时针

-webkit-transform:rotate(45deg);//Safari或Chrome

-moz-transform:rotate(45deg);//Firefox

-o-transform:rotate(45deg);//Opera

缩放:

使用scale方法,“scale(0.5)”表示缩小50%,“scale(0.5,2)”表示水平方向缩小50%,垂直方向放大一倍

倾斜:

使用skew方法,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度,“skew(30deg,30deg)”表示水平倾斜30度,垂直倾斜30度

移动:

使用translate方法,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离,“translate(50px,50px)”表示水平移动50个像素,垂直移动50个像素


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表