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

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

前言

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

使用

一、平移translate()

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

使用方式如下:

css 复制代码
/*	x轴平移200px,y轴平移100px	*/
transform: translate(200px, 100px);

二、缩放scale()

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

使用方式如下:

css 复制代码
/*	x轴放大两倍,y轴放大3倍	*/
transform: scale(2, 3);

三、倾斜skew()

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

使用方式如下:

css 复制代码
/*	x轴倾斜20度,y轴倾斜10度	*/
transform: skew(20deg, 10deg);

四、旋转rotate()

语法:rotate(旋转度数)

使用方式如下:

css 复制代码
/*	旋转45度	*/
transform: rotate(45deg);

另外还可以使用rotateX(旋转度数)、rotateY(旋转度数)、rotateZ(旋转度数)指定3D旋转

相关推荐
百度一下吧4 分钟前
umi后台管理项目实战:从工程搭建到生产构建
java·前端·javascript
派小心.11 分钟前
App埋点排查:iOS冷启动事件漏报先看初始化还是上报
前端·数据分析
事圆则缓21 分钟前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
peter676824 分钟前
css揭秘-背景和边框
前端·css
派小心.32 分钟前
小程序埋点验收:自定义事件上报后页面参数怎么核对
前端·数据分析
前端snow10 小时前
ai agent --- postgreSQL 关系型数据库
前端
卷无止境11 小时前
ECharts:把数据变成故事的可视化利器
前端
Eric_见嘉11 小时前
在职前端 Skill 和 MCP 分享
前端·后端·agent
liangshanbo121511 小时前
面试题:如何优化 Webpack 的打包速度?
前端·webpack·node.js
wengad11 小时前
从 wangEditor 迁到 wangEditor-next
前端·javascript·vue.js