注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

transform的martix  

2015-11-23 17:29:55|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
初学transform只知道translate、rotate、等属性,当你需要做下面这种效果同时还能拖拽时。
transform的martix - 叶落非殇 - 叶落非殇
  你会发现translate这些简单的东西变得非常不方便,聪明的你可能会想到很多方法去克服这种不方便。
transform所有的效果都是由martix得到的,translate这些东西只不过是简写,想要更高端更节省代码掌握martix是必须的。所谓martix就是矩阵,大部分人都学线性代数,而我们这里运用的大矩阵是最简单的一种,因此难度并不大。
transform : martix(a, b, c, d, e, f);别被这些参数吓到了,都是纸老虎。
对于矩阵和transform属性值的基本认识请看这个,写的非常详细非常好。理解CSS3 transform中的Matrix(矩阵)
如果你觉得涩涩难懂,那么我们换一种写法
transform : martix(scaleX * cosθ, scaleX * sinθ, -scaleY * sinθ, scaleY * cosθ, translateX, translateY);
这样6个参数就直接缩减成4个变量,再懒直接变成三个变量。
以上公式是个人归纳,具备局限性,2D不扭曲的情况下公式能满足条件,仅作为特殊条件下偷懒使用。强烈建立仔细认真的看上面提供的链接,只有懂得基本的东西是怎么来的,才能写出属于自己的方法。

  评论这张
 
阅读(28)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017