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

相关推荐
航飞光电市场经理9 分钟前
人员定位系统“全栈自研”技术解析:从射频前端到定位引擎的架构拆解
前端·架构
Apifox12 分钟前
Apifox 9 月更新|CLI 能力升级、GitLab 私有化部署接入与产品体验优化
前端·后端·测试
deli00713 分钟前
随机乱跳为什么能画出完美三角形:混沌游戏分形实验室
前端
Gizzap_Tech20 分钟前
国内官网增加英文版:URL、语言切换与 hreflang 怎么配置?
前端
剪刀石头布啊28 分钟前
泛洪DFS、BFS
前端
qetfw28 分钟前
Windows Server AD CS:根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊28 分钟前
为什么React组件很少前缀,而vue的不少组件都有前缀
前端
剪刀石头布啊34 分钟前
gird网格布局
前端
啃火龙果的兔子35 分钟前
Google Chrome(谷歌浏览器)常用快捷键
前端·chrome
剪刀石头布啊38 分钟前
js真的是单线程实现异步并发么?
前端