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. an exception occurred while initializing the database.

    对于手动删除本地的LocalDB数据库之后出现标题所示异常的,推荐下面的命令: sqllocaldb.exe stop v11.0 sqllocaldb.exe delete v11.0 在程序包管理 ...

  2. 预处理-04-#if defined和#if !defined

    因为对于一个大程序而言,我们可能要定义很多常量( 不管是放在源文件还是头文件 ),那么我们有时考虑定义某个常量时,我们就必须返回检查原来此常量是否定义,但这样做很麻烦. if defined 宏正是为 ...

  3. Docker 入门教程与实践

    title: Docker 入门教程与实践 tags: Docker ---- 在Windows上安装Docker客户端 1.下载Docker TollBox: https://docs.docker ...

  4. Pj Immediate Decodability

    判断一个串是否是其他的前缀 我们需要建立一颗tire树 在插入边的时候,如果遇到一个其他串的结尾,那么就说明至少有一个串,是插入串的前缀.如果在插入完后没有新增的节点,那么插入的串就是其他串的前缀 # ...

  5. rest_framwork组件

    rest framework介绍 (CBV(class base views)) 在开发REST API的视图中,虽然每个视图具体操作的数据不同,但增.删.改.查的实现流程基本套路化,所以这部分代码也 ...

  6. Pop–实现任意iOS对象的任意属性的动态变化

    简介 Pop 是一个可扩展的动画引擎,可用于实现任意iOS对象的任意属性的动态变化,支持一般动画,弹性动画和渐变动画三种类型. 项目主页: pop 最新示例: 点击下载 注意: 官方代码中,并不包含实 ...

  7. SqlServer和Oracle修改表结构语句

    SQL Server:1.增加列  ALTER TABLE users ADD address varchar(30);2.删除列  ALTER TABLE users DROP COLUMN add ...

  8. 7-4 python 接口开发（提供mock服务）

    1.登录接口开发(数据存在数据库中)  接口开发做mock(模拟功能) tools.py import pymysql def my_db(sql): conn = pymysql.connect(h ...

  9. HTML5--定义区块

    1.效果图如下: 备注: <article> 1.作用:用来表示文档.页面中独立的.完整的.可以独自被外部引用的内容 2.一般有个header元素,有时还有脚注 <article&g ...

  10. C# Newtonsoft.Json 解析多嵌套json 进行反序列化

    [ { ", "time": "2016-09-09 12:23:33", ", "freeShipping": tru ...