CSS3中动画transform必须要了解的Skew变化原理
2015-12-16 00:00
681 查看
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理.
skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直都不知道他的变化规则.所以使用起来有点摸不着头脑.动画上的使用,也就没那么优先考虑.
skew有两个属性: skewX,skewY.其实变化也就针对这两个值来操作.
首先我们来看,最基本的skew术语.
![](http://static.oschina.net/uploads/img/201512/16104525_0li8.jpg)
图中这个方形是一个BOX,skew的默认原点是盒子的中心点(0,0)横向为Y轴,纵向为X轴,这跟我们以往接触到的坐标轴,刚好是相反的.这个图应该很好理解.
下面我们来做一个skewX(10deg)的变化.
![](http://static.oschina.net/uploads/img/201512/16104525_9Yvx.jpg)
铅笔盒子,为原盒子.红色的盒子为变换后的盒子.从坐标轴X轴来看,首先将原X轴旋转10个度数,得到红色的X坐标轴,然后根据红色X坐标轴,做盒子的基本变换.这是最进本几何变换了.我们就不深入了,自己可以动手画画图纸,我就喜欢在图纸上理解.
下面继续完成skewY(10deg)的变化.
![](http://static.oschina.net/uploads/img/201512/16104525_GhrP.jpg)
这里和上面的BOX是一样的,变化的是针对Y轴了.最后得出的是红色BOX.
我附上最后的图纸:
![](http://static.oschina.net/uploads/img/201512/16104525_90oW.jpg)
画得不好,O(∩_∩)O~!如果需要自己试更大的度数,自己尝试用笔在纸上画一下,这样印象更深.
本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=154 ,欢迎大家传播与分享.
skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直都不知道他的变化规则.所以使用起来有点摸不着头脑.动画上的使用,也就没那么优先考虑.
skew有两个属性: skewX,skewY.其实变化也就针对这两个值来操作.
首先我们来看,最基本的skew术语.
![](http://static.oschina.net/uploads/img/201512/16104525_0li8.jpg)
图中这个方形是一个BOX,skew的默认原点是盒子的中心点(0,0)横向为Y轴,纵向为X轴,这跟我们以往接触到的坐标轴,刚好是相反的.这个图应该很好理解.
下面我们来做一个skewX(10deg)的变化.
![](http://static.oschina.net/uploads/img/201512/16104525_9Yvx.jpg)
铅笔盒子,为原盒子.红色的盒子为变换后的盒子.从坐标轴X轴来看,首先将原X轴旋转10个度数,得到红色的X坐标轴,然后根据红色X坐标轴,做盒子的基本变换.这是最进本几何变换了.我们就不深入了,自己可以动手画画图纸,我就喜欢在图纸上理解.
下面继续完成skewY(10deg)的变化.
![](http://static.oschina.net/uploads/img/201512/16104525_GhrP.jpg)
这里和上面的BOX是一样的,变化的是针对Y轴了.最后得出的是红色BOX.
我附上最后的图纸:
![](http://static.oschina.net/uploads/img/201512/16104525_90oW.jpg)
画得不好,O(∩_∩)O~!如果需要自己试更大的度数,自己尝试用笔在纸上画一下,这样印象更深.
本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=154 ,欢迎大家传播与分享.
![](http://static.oschina.net/uploads/img/201512/16104525_ZWfV.jpg)
相关文章推荐
- CSS动画:Transform中使用频繁的scale,rotate,translate动画
- CSS Sprite——CSS雪碧图
- 常见错误8-搭建hexo,本地server成功,部署到github上之后不能显示主题样式
- [How to]使用自定义cell进行tableview的创建,适用于cell样式不发生变化的情况。
- css
- 10007---CSS创建
- html+css复习小结
- css样式设置小技巧
- 10006---CSS id 和 class 选择器
- 前端开发入门:html和css基础知识回顾2
- Head First HTML&CSS 笔记(2)-定位与布局
- CSS代码缩写,占用更少的带宽
- 10005---CSS语法
- CSS Framework
- 前端开发入门:html和css基础知识回顾
- css3学习
- css布局模型
- CSS盒模型
- css3媒体查询
- 手机横屏竖屏css