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 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#