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. MySQL Workbench类型之MySQL客户端工具的下载、安装和使用

    本博文的主要内容有 .MySQL Workbench的下载 .MySQL Workbench的安装 .MySQL Workbench的使用 个人推荐,比较好的MySQL客户端工具 注意啊! 对于noi ...

  2. 第十七章、程序管理与 SELinux 初探 工作管理 (job control)

    工作管理 (job control) 这个工作管理 (job control) 是用在 bash 环境下的,也就是说:『当我们登陆系统取得 bash shell 之后,在单一终端机介面下同时进行多个工 ...

  3. cocoaPods教程

    <#这个不是命令,包括尖括号#> 一.源设置 1. 查看源,终端输入:  sudo gem sources -l 2. 删除已有的源,如:  sudo gem sources --remo ...

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

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

  5. 【转】eclipse插件：OpenExplorer快速打开文件目录

    在MyEclipse开发中常用到其中一个"Open In Explorer"的小插件,可以直接进入Windows资源管理器中打开选中文件所在的目录,在使用eclipse开发时也很需 ...

  6. bzoj2132: 圈地计划

    要分成两坨对吧.. 所以显然最小割 但是不兹辞啊.. 最小割是最小的啊 求最大费用怎么玩啊 那咱们就把所有费用都加起来,减掉一个最小的呗 但是两个属于不同集合的点贡献的价值是负的啊 网络流怎么跑负的啊 ...

  7. 【Android - MD】之CardView的使用

    CardView是Android 5.0新特性--Material Design中的一个布局控件,可以通过属性设置显示一个圆角的类似卡片的视图. 1.CardView的属性: app:cardCorn ...

  8. shell获取 linux 系统的位数

    getconf LONG_BIT 直接返回  32  或者 64

  9. iOS-你真的会用UIMenuController吗?(详细)

    UIMenuController的介绍 什么是UIMenuController? UIMenuController是UIKit里面的控件 UIMenuController的作用在开发中弹出的菜单栏 后 ...

  10. urlconnection用法(转)

    1.获取ip地址 package demo.net; import java.net.InetAddress; import java.net.UnknownHostException; /* * 获 ...