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.当我们同时有位移和其它属性的时候,记得要将位移放到最前

相关推荐
程序员爱钓鱼1 分钟前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel7 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着7 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友9 小时前
什么是API签名?
前端·后端·安全
会豪11 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子11 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶11 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子11 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233311 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts