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. C#自定义规则对比两个集合的对象是否相等

    IList<获取的类> ret = 类的结果集; return ret.Except(另一个相同类型的对象列表集, new AClassComPare()): public class A ...

  2. TCP的可靠连接是如何产生的？

    http://bbs.csdn.net/topics/190011812 看过TCP/IP的源代码没?tcp中所谓的连接只是在tcp的tcb中存储了对端的地址信息,并且记录连接的状态,通过重发之类的来 ...

  3. 问题 B: 投简历

    题目描述 小华历经12寒窗苦读,又经历4年大学磨砺,终于毕业了,随着毕业季的到来,找工作也日益紧张起来.由于要面试不同的公司,因此小华需要准备不同的简历.当然最基本的信息是必不可少的,基本信息:姓名. ...

  4. P1036 选数

    题目描述 已知 nn 个整数 x_1,x_2,…,x_nx1​,x2​,…,xn​,以及11个整数kk(k<nk<n).从nn个整数中任选kk个整数相加,可分别得到一系列的和.例如当n=4 ...

  5. 2017.9.23 HTML学习总结----JavaScript实现输入验证

    定义:对于一个HTML页面中的表单,可以获取其中的各项表单域信息, 利用这些信息,可以判定个表单域所提供的输入值是否合法,是否 符合所要求的格式,这就是表单的输入验证. (1)需要验证的表单输入域的要 ...

  6. ROS根据访问不同的网址，走不同的路由策略的脚本

    脚本如下,可以10s一循环计划执行 :global tmpaaa [/ip firewall address-list find list=Not-To-Guowai];foreach i in $t ...

  7. Object类的常用方法

    Object类是Java中所有类的始祖.如果没有明确的指定继承,则默认继承Object类.在Java中除了基本类型外都是Object类型的对象,包括数组. 1)equals方法 Object: pub ...

  8. 第18章 SysTick—系统定时器—零死角玩转STM32-F429系列

    第18章     SysTick—系统定时器 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  9. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

  10. 【Java】Maven安装、Eclipse配置以及相关错误解决集合

    作者呕血总结,下面写的每一个错误我都遇过 · Maven安装 · Eclipse配置 · Maven安装 安装前请确保已经装有JDK. 一. 准备Maven程序包 到官网https://maven.a ...