首页 前端知识 CSS3旋转、平移、缩放、倾斜

CSS3旋转、平移、缩放、倾斜

2025-03-02 13:03:29 前端知识 前端哥 474 627 我要收藏

CSS3平移、缩放、倾斜、旋转

前言

下面代码用到了盒子如下:

请添加图片描述

使用

一、平移translate()

语法:translate(x轴平移距离, y轴平移距离)

使用方式如下:

/*	x轴平移200px,y轴平移100px	*/
transform: translate(200px, 100px);

请添加图片描述

二、缩放scale()

语法:scale(x轴放缩倍数, y轴放缩倍数)

使用方式如下:

/*	x轴放大两倍,y轴放大3倍	*/
transform: scale(2, 3);

请添加图片描述

三、倾斜skew()

语法:skew(x轴倾斜角度, y轴倾斜角度)

使用方式如下:

/*	x轴倾斜20度,y轴倾斜10度	*/
transform: skew(20deg, 10deg);

请添加图片描述

四、旋转rotate()

语法:rotate(旋转度数)

使用方式如下:

/*	旋转45度	*/
transform: rotate(45deg);

请添加图片描述
另外还可以使用rotateX(旋转度数)rotateY(旋转度数)rotateZ(旋转度数)指定3D旋转

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

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

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