[心情] 解放CSS 单行transform,分离scale, translate 和rotate 吧!
[心情] 解放CSS 单行transform,分离scale, translate 和rotate 吧!
定期都有在关注Youtube Web Dev Simplified 的介绍前端新讯的影片,虽然很早就知道有一般拆解Transform 属性,变成scale, rotate … 的功能,但如今看到如此的支援度,还是令人雀跃不已。
资料传送门
影片: https://www.youtube.com/watch?v=416MT-VmJdI
医疗器械网络: 旋转 , 翻译 , 规模
犬类: 翻译
在大众 铬 104 (2022/08/02) 及 _Safari 14.1(2021/04/26)
_ 之后的版本皆可使用
意思是:近期还没开始开发的专案都可以考虑的酷东西
简单来说,你可以从这样:
变换:缩放(2)平移(50px,50px);
改写成这样:
规模:2;
翻译:50px 50px;
对程式不熟或不常写CSS的套件仔可能会觉得很瞎
就小小的改动支援度会有什么差
- 自己做属性绑定更简单,程式码可以更浓缩,动画easy
(用一般框架,直接绑定DOM就可快速做出基本动画了,名称也同步)
范例 - 与其他应用程式同步。除了网页外,其他动画或影片游戏的制作上,这些属性设定大部分都是拆开的了,如今支援拆开撰写,想必在其他软体输出成网站可使用的格式时,支援度也会相对的提高。
- 学习成本降低,老习惯几乎作废。就如同一些老前辈会说之前只有table可以用,你们现在flex太方便等等之类的…,有感而发。
一起来期待未来会有什么应用(Bug)吧:D
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
标签:
css;编程;前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通