transform是css3中对于性能来说是比较安全的

在二维空间里面，skew有两个属性值：skewX,skewY,图形的变化也就是针对这两个值来操作；

transform: skewX(45deg)；

可以看到demo标签向左倾斜45度产生的形变，那么为什么会产生这个形变呢？

因为demo的高度是不变的，只要倾斜角度不是180的倍数，demo的高度始终保持原有的高度，所以只能拉长本身，产生形变；（围绕X轴倾斜，保持高度不变，围绕Y轴，保持宽度不变）

为什么说不是180的倍数呢？原因很简单，如果是180的倍数，demo元素将不可见。

transform: skew(45deg，45deg);

注意：两张图片的围绕中心点不同，这个默认值是图一

css3 skew坐标轴笔记的更多相关文章

  1. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  2. CSS3 Animation学习笔记

    Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...

  3. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  4. css3动画相关笔记

    1.$(".aa").delay(2500).animate({width:0}); // 延迟 2.setTimeout(function(){ --> css3 anim ...

  5. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  6. css3 和 html5 笔记

    1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s tran ...

  7. HTML5与CSS3新增特性笔记

    HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 on ...

  8. CSS3新技能学习笔记

    说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及 ...

  9. 《The Book of CSS3》学习笔记

    一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...

随机推荐

  1. Last_SQL_Errno: 1050

    主库上create table,从库上存在. 报错信息如下所示:                Last_SQL_Errno: 1050                Last_SQL_Error: ...

  2. Poj(1521),哈夫曼编码

    题目链接:http://poj.org/problem?id=1521 这里,网上有很多博客都有写,很多人没有建树,直接就是求一下这个哈夫曼编码的长度,的确很巧妙,我也用的这个方法,但是,几乎所有博客 ...

  3. cgi程序报 Premature end of script headers:

    这段时间写了一个CGI,也是为了应付工作,挺简单的一个程序,总是在调用的时候报:Premature end of script headers: 很让人头疼!   在网上找了些资料,按资料 ---- ...

  4. Githug攻略

    ruby运行环境安装 githug 是一个 ruby 程序,运行的 githug 需要 ruby 运行环境.下面部分的主要内容是如何在不同平台上安装好 ruby 环境. MacOSX MacOSX 里 ...

  5. mapping4java源码下载(alibab的开源项目)

    项目中需要频繁实现json-->pojo,Bean-->Bean的转换,使用了mapping4java这个开源的框架: 网上查资料,该框架是愤怒的苹果提供的,附上原文地址 我也造了个轮子: ...

  6. image retrieval数据集

    1. Oxford,vgg组,主要是building方面的数据.http://www.robots.ox.ac.uk/~vgg/data/oxbuildings/index.html 2. Calte ...

  7. 7、SpringBoot+Mybatis整合------PageHelper简单分页

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis/tree/1d30d2a573ce6784149a28af9b ...

  8. LeetCode804. Unique Morse Code Words

    题目 国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一个由一系列点和短线组成的字符串, 比如: "a" 对应 ".-", "b" 对应 ...

  9. 牛客小白月赛2 E 是是非非 【尼姆博弈】

    链接:https://www.nowcoder.com/acm/contest/86/E来源:牛客网 题目描述 坎为水,险阳失道,渊深不测:离为火,依附团结,光明绚丽. 坎卦:水洊至,习坎:君子以常德 ...

  10. 爬虫学习（十五）——json解析

    json与jsonpath 对象{}:jsonobject 对象:对象在js中表现为{}括起来的内容,数据结构为{key:value,key:value...}键值对的结构,在面向对象的结构中,key ...