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. Math.random()随机生成x~y间的数字

    JS如何随机产生数字呢?这就用到了Math.random()方法,它能够随机产生0~1间的数字,这个数可能为0,但会小于1. 那么,如果我想要大于等于1小于10之间的随机整数呢?需要分为以下几步: 1 ...

  2. VedioCapture

    国内的技术的浮躁可见一般,在一个用了七八年的项目里面使用的类,居然拼写都是错的,在网上一搜,转载的也大有人在,最低级的错误,你可以不懂编程,但是只要上过高中,Video这个单词总该学过吧,居然转载的时 ...

  3. 线程 task训练

    1. task类表示一个线程,最简单的task的构造方法是 ,参数是Action<t>,是一个无返回值的泛型委托. 指向要执行的函数.当调用·start()方法时,就执行子线程.执行指向的 ...

  4. 14 - Log日志

    LOG https://www.cnblogs.com/yyds/p/6901864.html logging logging模块提供模块级别的函数记录日志 包括四大组件 1.日志相关概念 日志的级别 ...

  5. Java8函数之旅 （二） --Java8中的流

    流与集合    众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...

  6. 一篇SSM框架整合友好的文章（二）

    上一篇讲述了DAO 层,mybatis实现数据库的连接,DAO层接口设计,以及mybtis和spring的整合.DAO层采用接口设计方式实现,接口和SQL实现的分离,方便维护.DAO层所负责的仅仅是接 ...

  7. Error:linker command failed with exit code 1 (use -v to see invocation) - iOS

    今天在操作 CoreData 时,创建完 Create NSManagedObject Subclass...  后,工程中会自动生成四个文件,如下图所示:   此时此刻便以工程,激动人心的时刻来临了 ...

  8. vue项目不能同时被localhost和ip地址同时访问的方法

    方法1.将index.js中的host的值改为‘0.0.0.0’ 方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决

  9. 你可能不知道的 new.target

    new 是构造函数生成实例的命令, ES6为 new 命令引入了 new.target属性.这个属性用于确定构造函数是怎么调用的. 在构造函数中, 如果一个构造函数不是通过 new操作符调用的, ne ...

  10. elasticsearch-dsl笔记

    一.elasticsearch安装 安装java1.8以上 安装elasticsearch-rtf(https://github.com/medcl/elasticsearch-rtf) head插件 ...