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

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

2024-05-09 10:05:24 前端知识 前端哥 408 418 我要收藏

在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

(1)浏览器支持

到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。

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

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

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

HTML5学习记录

2024-04-29 12:04:01

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