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. Selenium入门16 获取页面源代码

    页面源代码:page_source属性 获取源代码之后,再用正则表达式匹配出所有的链接,代码如下: #coding:utf-8 from selenium import webdriver impor ...

  2. MySQL一致性非锁定读

    一致性非锁定读(consistent nonlocking read)是指InnoDB存储引擎通过多版本控制(multi versionning)的方式来读取当前执行时间数据库中行的数据,如果读取的行 ...

  3. vector的几种初始化和遍历

    随着C++11标准的出现,vector出现了新的初始化和遍历用法,但是vs2010和较高版本并没有能完全支持C++11标准,所以我就将它的所有的用法归纳了一下. vector的初始化 vector基本 ...

  4. 下载Xcode历史版本方法

    1.打开链接:https://developer.apple.com/download/more 进入页面 2.在搜索框输入Xcode,回车搜索.如图,找到各种版本Xcode 搜索Xcode 3.双击 ...

  5. SpringBoot集成Quartz(解决@Autowired空指针Null问题即依赖注入的属性为null)

    使用spring-boot作为基础框架,其理念为零配置文件,所有的配置都是基于注解和暴露bean的方式. Quartz的4个核心概念: 1.Job表示一个工作,要执行的具体内容.此接口中只有一个方法v ...

  6. maven中import scope依赖方式解决单继承问题的理解

    在maven多模块项目中,为了保持模块间依赖的统一,常规做法是在parent model中,使用dependencyManagement预定义所有模块需要用到的dependency(依赖) <d ...

  7. 接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承实体类(concrete class)?

    接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承实体类(concrete class)? 答:接口可以继承接口.抽象类可以实现(implements)接口,抽象类 ...

  8. 1189: [HNOI2007]紧急疏散evacuate

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3831  Solved: 1119[Submit][Status][Discuss] Descript ...

  9. UVA_10820_send a table

    When participating in programming contests, you sometimes face the following problem: You know how t ...

  10. lintcode_177_把排序数组转换为高度最小的二叉搜索树

    把排序数组转换为高度最小的二叉搜索树   描述 笔记 数据 评测 给一个排序数组(从小到大),将其转换为一棵高度最小的排序二叉树. 注意事项 There may exist multiple vali ...