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. POJ - 3470 Walls

    小鸟往四个方向飞都枚举一下,数据范围没给,离散以后按在其中一个轴线排序,在线段树上更新墙的id,然后就是点查询在在哪个墙上了. 这题有个trick,因为数据范围没给我老以为是inf设置小了,WA了很多 ...

  2. HashMap扩容

    前言:当您在读该文章的时候,我认为您已经知道HashMap的底层实现原理,如果您还不清楚HashMap是如何实现的,请先去了解,再回来看本文章. 1.HashMap什么时候扩容? HashMap的容量 ...

  3. 单调队列 poj2823,fzu1894

    题目链接:http://poj.org/problem?id=2823 用RMQ超时了,我想应该是不会的,看discuss说,之前RMQ过了. 维护两个单调队列. 单调递减的队列,每插入一个时: 超过 ...

  4. 相机标定/校正（Camera Calibration）

    以前DIP課程有做過Camera calibration,這次因為用Gopro做Visual SLAM,所以又要撿一下校正的過程.主要還是張正友的方法. OpenCV: 用OpenCV自帶的Sampl ...

  5. 彩色图像直方图均衡（Histogram Equalization）

    直方图均衡(Histogram Equalization) 一般步骤: 1.统计直方图每个灰度级出现的次数(概率) 2.累计归一化的直方图 3.计算新的像素值 重要:彩色直方图均衡不能对RGB分别做再 ...

  6. ibator自动代码生成

    首先,强烈推荐一篇文章,介绍的特详细 http://www.iteye.com/topic/821983 1. 插件安装 http://blog.csdn.net/rchm8519/article/d ...

  7. C#语言概述

    C#语言概述 一..NET Framework .NET Framework是Windows的一个不可或缺的组件,它包括公共语言运行库(CLR)和类库两部分. CLR是Microsoft的公共语言基础 ...

  8. LeetCode-177:第N高的薪水

    第N高的薪水与第二高的薪水,解题思路是一样的,只要对LeetCode-176的SQL做一下变形,便可以满足这题,详见:https://www.cnblogs.com/zouqf/p/10282392. ...

  9. django+xadmin在线教育平台（十三）

    这个6-8对应对应6-11,6-12 拷入forgetpassword页面 书写处理忘记密码的view users/views.py # 用户忘记密码的处理view class ForgetPwdVi ...

  10. JSONArray.fromObject不执行且不报错问题的解决

    今天在写javaweb工程的时候需要向前台传json格式的数据,用到了json-lib-2.4-jdk15.jar等一系列包,然而却出现如下状况: CityBean是一个javaBean,我们看到,控 ...