ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

[心情] 解放CSS 单行transform,分离scale, translate 和rotate 吧!

2022-09-05 00:35:30  阅读:201  来源: 互联网

标签:动画 scale 50px transform rotate 支援 CSS


[心情] 解放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的套件仔可能会觉得很瞎
就小小的改动支援度会有什么差

  1. 自己做属性绑定更简单,程式码可以更浓缩,动画easy
    (用一般框架,直接绑定DOM就可快速做出基本动画了,名称也同步)
    范例
  2. 与其他应用程式同步。除了网页外,其他动画或影片游戏的制作上,这些属性设定大部分都是拆开的了,如今支援拆开撰写,想必在其他软体输出成网站可使用的格式时,支援度也会相对的提高。
  3. 学习成本降低,老习惯几乎作废。就如同一些老前辈会说之前只有table可以用,你们现在flex太方便等等之类的…,有感而发。

一起来期待未来会有什么应用(Bug)吧:D

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/14320/12430500

标签:动画,scale,50px,transform,rotate,支援,CSS
来源: https://www.cnblogs.com/amboke/p/16656630.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有