css 2D转换

转换(transorm)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。

1.移动:translate
语法:
复制代码
transform:translate(x,y)或者分开写
transform:translateX(n)
​transform:translateY(n)
优点:

1.定义2D转换中的移动,沿着x和y轴移动元素

2.translate最大的优点:不会影响到其它元素的位置

3.translate中的百分比单位是相对于自身元素(宽度或高度)的translate:(50%,50%)

4.对行内标签没有效果

2.旋转:rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。

语法:

transform:rotate(度数)

重点:

1.rotate里面跟度数,单位是deg 比如 rotate(45deg)

2.度数为正时,顺时针,负时,为逆时针

3.默认旋转的中心点是元素的中心点

2D转换中心点transform-origin

可以设置元素转换的中心点

语法:
复制代码
transform-origin: x y;
重点:

1.注意后面的参数x和y用空格隔开

2.xy默认转换的中心点是元素的中心点(50% 50%)

3.还可以给x y设置 像素 或者 方位名词 (top bottom left right center)

3.缩放:scale
语法:

transform:scale(x,y)

注意:

1.注意其中的x和y用逗号分隔

2.transform:scale(1,1):宽和高都放大一倍,相对于没有放大

3.transform:scale(2,2):宽和高都放大了2倍

4.transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

5.ransform:scale(0.5,0.5):缩小

6.sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其它盒子

2D转换综合写法

注意:

1.同时使用多个转换,其格式为:transform:translate() rotate() scale()...等

2.其顺序会影响转换效果。(先旋转会改变坐标轴方向)

3.当我们同时有位移和其它属性的时候,记得要将位移放到最前

相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim4 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头6 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz6 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子6 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边6 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客6 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8886 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家6 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试