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

相关推荐
qetfw10 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯10 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a11177610 小时前
微光小屋-前端养成小游戏 开源项目
前端
kyriewen11 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
张鑫旭11 小时前
快速过下我2026年上半年的前端学了些啥
前端
এ慕ོ冬℘゜11 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
hoLzwEge11 小时前
拯救低效调试!code-inspector-plugin 让代码定位如虎添翼
前端·前端框架·node.js
J船长11 小时前
烂笔头扫盲:LLM Eval 入门:从「感觉挺好」到「数据说话」的工程化落地
前端
skiyee12 小时前
被多个 UView 系 UI 库 “抄” 的 @uni-ku/root 究竟怎么实现?
前端