写这篇文章是因为在一个前端QQ群里,网友 “小豆豆” (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理。于是,我觉得有必要写个博文,帮助那些不懂的人,让他们看了此文就懂。

进入正题:

先说明下,电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的。如下图:

图上的盒子就是代表我们的电脑屏幕,原点就是屏幕的左上角,竖直向下为X轴正方向,水平向右为Y轴正方向。

1、倾斜skew

先看图

每个图下方都有skew的参数。粗的红色的线分别是水平垂直方向上的投影,其长度与左边的未倾斜的边是相等的。而两个参数所代表的角度,就是图中黑色标记的角。从上面我们也可以看出来:skewx是代表与X轴倾斜的角度,方向是逆时针;skewY是代表与Y轴倾斜的角度,方向是顺时针。

但是要注意的是,例如当用skew(60,60)的时候,角度的算法不是上面那样的呢,因为当两个参数的角度都大于45的时候,其实我们看到的是图形的反面,也就是长和宽交换了位置。我们可以看图片上的MyDiv确实是倒的

此时黄色的才才是投影的矩形,可以和左边的原图进行比较。而原来的粗的红色的线是错的,错的,错的!!!多说几遍先。而角度则是黑色的标出来的!

其他角度,大家也可以去推一推。

需要说明的是skew的默认原点 transform-origin 是这个物件的中心点。这也是我在第二行有一条橘黄色的细线,是为了寻找中心点,然后获取投影。

如果上面的你不能理解,就看我画的投影,首先知道角度是怎么标记的,然后记住这么一句话:不管它是一个方向倾斜,还是两个方向一起倾斜,最后的在X,Y轴上的投影长度是不变的,也就是参数都为 0 时候的长度但是投影要注意旋转的角度。为了保持投影长度不变,所以就得拉长图形,也就是变形。所以如果你想通过动手实验的话,是得不出上面的结果,因为实际的不会变形。

如果你真的懂了,用手就可以画出最后的结果的。

skew效果体验             skewX效果体验              skewY效果体验

2、旋转rotate

用法:

transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

rotate()默认旋转中心为图片的中点

我以前用rotate写过一个时钟,获取电脑当前时间,然后显示,开始计时,具体如下图:

源码参见我很早之前写的:javascript实例——时间日期篇

还有rotateX,rotateY是,这个动手操作下就能理解,记得旋转中心是图形的中心。

rotateX体验效果       rotateY体验效果            rotate效果体验

3、缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

  • 一个参数时:表示水平和垂直同时缩放该倍率
  • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

需要注意的是,scale不看XY轴,而是看水平竖直的。具体可看下面的示例:

以上三个分别是scale(1,1);scale(0.5,2);scale(1.1,1.1);

scale效果体验

4、移动 translate

用法:transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离,单位px,

  • 一个参数时:表示水平方向的移动距离;
  • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

这个比较简单就不多说了,跟relative的属性有点像。它也是不看XY轴的。

translateX水平移动体验    translateY竖直移动体验        translate效果体验

组合

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法:

transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

参考文章:

1、CSS3新增样式大解析:[7]skew之元素变形

2、CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3 transform 属性详解(skew, rotate, translate, scale)的更多相关文章

  1. 2016 - 1- 14 UI阶段学习补充 transform属性详解

    UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...

  2. android:exported 属性详解

    属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...

  3. OutputCache属性详解(一)一Duration、VaryByParam

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  4. OutputCache属性详解(二)一 Location

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  5. OutputCache属性详解(三)— VaryByHeader,VaryByCustom

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  6. OutputCache属性详解(四)— SqlDependency

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  7. WPF依赖属性详解

    WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency P ...

  8. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  9. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...

随机推荐

  1. php 用 http post方法传输数据

    private function http_post($url,$post,$timeout){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL ...

  2. TroubleShooting笔记--快照进程sp_replupdateschema和索引重建发生冲突

    今天早上服务器出现大面积的阻塞,上去排查blocking,最后大概确定的问题是: rebuild index job(243) --->blocked--->sp_replupdatesc ...

  3. Android(Linux)控制GPIO的方法及实时性分析

    Linux下控制GPIO的方法有N种,详细请参考<RPi GPIO Code Samples>,文中用十多种语言演示了如何控制GPIO,非常全面详尽.因此,这里不再多做赘述,仅把调试过程中 ...

  4. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  5. Oracle数据库恢复

    建用户 wf2014 赋权限 grant dba to wf2014; 数据恢复 imp wf2014/wf2014 file=D:\wf2014.dmp full=y 参数设置: datasourc ...

  6. java 20 -3 递归之删除特定目录下的特定文件

    /* 需求:删除H:\demo目录下的带内容的文件 分析: A:封装该目录 B:获取该目录下所有的文件或文件夹的File数组 C:遍历该File数组,获取每一个File对象 D:判断所遍历的FIle对 ...

  7. python_字符串

    1. 字符串的格式化 格式: 说明: (1)转换说明符 (2)格式化操作符右操作数可以是任何东西,如果是元组的话,每一个元素都会被单独格式化. 2. 字符串常用的方法 (1)find int = fi ...

  8. HDU 1312 http://acm.hdu.edu.cn/showproblem.php?pid=1312

    #include<stdio.h> #include<string.h> #include<math.h> #include<stdlib.h> #de ...

  9. Android WebView缓存分析

    http://blog.csdn.net/a345017062/article/details/8703221   WebView的缓存可以分为页面缓存和数据缓存. 页面缓存是指加载一个网页时的htm ...

  10. Spark SQL JSON数据处理

    背景   这一篇可以说是“Hive JSON数据处理的一点探索”的兄弟篇.   平台为了加速即席查询的分析效率,在我们的Hadoop集群上安装部署了Spark Server,并且与我们的Hive数据仓 ...