首页 前端知识 CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)(1)

CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)(1)

2024-05-10 08:05:39 前端知识 前端哥 374 704 我要收藏

transform:rotate(45deg);

3 缩放 
使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。

transform:scale(0.5);//缩小一半

(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

transform:scale(0.5,2);//水平方向缩小一半,垂直方向放大一倍。

4 倾斜 
使用skew方法实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

transform:skew(30deg,30deg);//水平方向上倾斜30度,垂直方向上倾斜30度。

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。

transform:skew(30deg);

5 移动
使用translate方法来移动文字或图像,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

transform:translate(50px,50px);// 水平方向上移动50px,垂直方向上移动50px

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上移动,垂直方向上不移动。

t

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7909.html
标签
评论
发布的文章

HTML5-本地存储浅谈

2024-06-19 08:06:18

JS实现倒计时功能

2024-06-19 08:06:34

HTML黑客帝国字母雨

2024-06-11 09:06:45

每天一篇之HTML(2)

2024-06-19 08:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!