transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理.

skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直都不知道他的变化规则.所以使用起来有点摸不着头脑.动画上的使用,也就没那么优先考虑.

skew有两个属性: skewX,skewY.其实变化也就针对这两个值来操作.

首先我们来看,最基本的skew术语.


图中这个方形是一个BOX,skew的默认原点是盒子的中心点(0,0)横向为Y轴,纵向为X轴,这跟我们以往接触到的坐标轴,刚好是相反的.这个图应该很好理解.

下面我们来做一个skewX(10deg)的变化.


铅笔盒子,为原盒子.红色的盒子为变换后的盒子.从坐标轴X轴来看,首先将原X轴旋转10个度数,得到红色的X坐标轴,然后根据红色X坐标轴,做盒子的基本变换.这是最进本几何变换了.我们就不深入了,自己可以动手画画图纸,我就喜欢在图纸上理解.

下面继续完成skewY(10deg)的变化.


这里和上面的BOX是一样的,变化的是针对Y轴了.最后得出的是红色BOX.

我附上最后的图纸:


画得不好,O(∩_∩)O~!如果需要自己试更大的度数,自己尝试用笔在纸上画一下,这样印象更深.

本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=154 ,欢迎大家传播与分享.

CSS3中动画transform必须要了解的Skew变化原理的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  5. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  6. 对CSS3中的transform：Matrix（）矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  7. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  8. css3中的transform、transition、translate、animation（@keyframes）的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  9. CSS3中的transform

    CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate sca ...

随机推荐

  1. java ee eclipse 配置 ssh框架

    mvnDebug tomcat:run 这条命令主要用来远程测试,它会监听远程测试用的8000端口,在eclipse里打开远程测试后,它就会跑起来了,设断点,调试,一切都是这么简单. 0.如果是mav ...

  2. 长沙Uber优步司机奖励政策（1月25日~1月31日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 超级好用的国际汇兑平台－－Transferwise

    一年的CSC留学快结束了,手里还剩了些积攒下来的美元.就国内那点博士的工资,出来一趟好不容易领了点美元可不想都给银行汇兑的手续费给吞了去. 这两天英国退欧,英镑大跌,美元有涨,是个把手里的美元寄回国换 ...

  4. c++重点知识点

    - const加强 在变量前加const,说明变量是常量只读属性.假如用指针去修改const常量会用什么结果.上例子: //a 是一个只读的常量,按照理论应该不能被修改 ;//内存中为a分配地址,赋值 ...

  5. 机房收费系统个人重构关于SQLHelper

    近期在敲机房,对于SQLHelper也是心里有些怵,由于原来没用过,可是看了一些博客和资料后发现,假设不用这个类,会大大添加代码量,并且,事实上它并不新,它是一个有多个关于数据库增删改查操作的语句函数 ...

  6. jquery+正則表達式验证邮箱格式的样例

    js: $("#email").blur(function(){ //获取id相应的元素的值,去掉其左右的空格 var email = $.trim($('#email').val ...

  7. 使用php glob函数查找文件，遍历文件目录(转)

    函数说明:array glob ( string $pattern [, int $flags ] )功能:寻找与模式匹配的文件路径,返回包含匹配文件(目录)的数组(注:被检查的文件必须是服务器系统的 ...

  8. systemtap [主设备号,次设备好,inode]监控文件

    SystemTap 是监控和跟踪运行中的linux 内核的操作的动态方法,SystemTap 应用:对管理员,SystemTap可用于监控系统性能,找出系统瓶颈,而对于开发者,可以查看他们的程序运行时 ...

  9. storyBoard使用介绍

    storyBoard使用介绍 转载地址:http://www.2cto.com/kf/201210/161737.html 一 .简述 Storyboard是你可以用来定义用户界面的一种新的方式,像x ...

  10. MyEclipse8.6安装svn（非link方式）

    此方法经试验可行,暂时可以作为最佳解决方案. 本文所使用的MyEclipse版本为:8.6.1 svn的eclipse插件版本为:1.6.17,下载地址:http://subclipse.tigris ...