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

相关推荐
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家9 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能