写这篇文章是因为在一个前端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. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  3. android:exported 属性详解

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

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

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

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

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

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

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

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

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

  8. WPF依赖属性详解

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

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

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

随机推荐

  1. Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。

      解决方法:   下载Win10的中文语言包.

  2. android 编译

    编译 Android完全编译,耗时 1 小时 25 分$ make编译当前目录下的模块,耗时 1 小时 31 分mm编译指定目录下的模块mmm 模块的根目录清除上次编译输出make clean单独编译 ...

  3. oracle方案是什么?

    某用户拥有的所有的数据库对象的逻辑集合,就叫方案:方案在名称上和用户名是相同的. 比如有一个Oracle"用户"叫scott,那么一般称Scott用户所拥有的所有数据库对象的集合叫 ...

  4. 在Html中使用Requirejs进行模块化开发

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...

  5. Android 模拟器 获得 root权限

    启动一个模拟器,开始-运行-输入cmd,打开dos,依次输入 adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system ...

  6. FL2440驱动添加(3)LCD驱动添加学习笔记

    FL2440 LCD内置控制器,320*240 TFT型LCD. 自我理解总结的两种添加驱动模式: 非platform方式添加驱动: 加载驱动: 1,硬件初始化,申请内存,并作地址映射 2,分配设备号 ...

  7. python进程、线程、协程(转载)

    python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CPU是计算机的核心,它承担计算机的所有任务. 操作系统是运行在硬件之上的软件,是计算机的管理者,它负责资 ...

  8. javascript笔记5-BOM

    Javascript应用的平台很多,不仅仅针对Web.在Web中使用Javascript,BOM(browser object model,浏览器对象模型)是核心. BOM提供了很多对象,用于访问浏览 ...

  9. Java 单测 回滚

    Java 在单测的时候 需要做回滚 设置如下: 需要添加以下 注解 在类上 defaultRollback = true : 为 默认全部回滚 defaultRollback = false : 为 ...

  10. Codeforces Round #352 (Div. 2) D. Robin Hood

    题目链接: http://codeforces.com/contest/672/problem/D 题意: 给你一个数组,每次操作,最大数减一,最小数加一,如果最大数减一之后比最小数加一之后要小,则取 ...