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旋转

相关推荐
凌云若寒3 分钟前
BarTender官网下载打印机驱动
运维·服务器·前端·网络·产品经理
zd84510150015 分钟前
基于 HTML 与 Modbus TCP 构建设备仪器上位机:可行性分析与代码结构设计
前端·tcp/ip·html
Amumu121381 小时前
NodeJs介绍
前端·node.js
咧咧小侠1 小时前
Windows Codex 连接 Chrome 失败:一次 nodeRepl.fetch 报错排查记录
前端·chrome
Eider19981 小时前
大模型输出格式幻觉解决思路
开发语言·前端·javascript
广州智造1 小时前
Radioss时间步长(Time Step)
前端·设计·cad·建模·cae·radioss
志尊宝1 小时前
Vue3 零基础每日笔记(085):项目上线前 Checklist——环境变量、报错监控、安全自查
前端·javascript·笔记·安全·信息可视化·echarts
朱涛的自习室1 小时前
我让 Gemini 4 当高管、DeepSeek 当员工,开了一家软件公司(Day 1)
android·前端·人工智能
志尊宝1 小时前
Vue3 零基础每日笔记(088·完结):从零到一——一个完整 Vue3 项目的成长复盘
前端·javascript·vue.js·笔记·ecmascript·#vue.js
deli0071 小时前
加一台机器,为什么只有 1/N 的 key 要搬家?一致性哈希实测
前端