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使用谷歌浏览器自带手机模拟器运行H5网页

    背景:最开始用手机模拟H5页面跑自动化,发现经常因为app连接或者网络原因等一系列情况,导致M版(H5页面)用例跑不通,想通过浏览器自带的手机模拟器运行,保证稳定性 浏览器自带的模拟器如下图: 代码实 ...

  2. LA 5031 图询问

    题目链接:https://vjudge.net/contest/159527#problem/A 题意:(求一个 图 中的连通分量中的 第 k 大) 一张图,n 个点,m 条边, 有一些操作: 删除 ...

  3. miller——rabin

    突然发现自己在线性筛素数中有这个,忘了好久: #include<iostream> #include<cstdio> using namespace std; long lon ...

  4. 基于java开发的开源代码GPS北斗位置服务监控平台

    最近在研究位置服务平台,基于全球卫星定位技术(GNSS).互联网技术.空间地理信息技术(GIS).3G/4G无线通信技术,面向全国公众用户建立大容量.实时.稳定的位置信息服务运营平台.实现管理目标的实 ...

  5. 字符串替换For linux C

    1.临时空间给了个1024,不需要可减少长度. 2.结果只用用strcpy了,没校验. bool Replace(char *str,const char *src, const char *des) ...

  6. hdu_1573_X问题 （分段之中国剩余

    求在小于等于N的正整数中有多少个X满足:X mod a[0] = b[0], X mod a[1] = b[1], X mod a[2] = b[2], …, X mod a[i] = b[i], … ...

  7. IBM Rational Software Architect V9.0安装图解

    IBM Rational Software Architect(RSA) -- IBM软件开发平台的一部分 – 是IBM在2003年二月并购Rational以来,首次发布的Rational产品.改进过 ...

  8. Python生成器、装饰器

    ## 生成器 - 生成器是用来创建Python序列的一个对象 - 通常生成器是为迭代器产生数据的 - 例如range()函数就是一个生成器 - 每次迭代生成器时,它都会记录上一次调用的位置,并返回下一 ...

  9. TP5 行为Behavior用法说明

    TP5 行为Behavior用法说明 无论是tp3还是在tp5中,行为都是一个非常重要的概念,关于太多的理论知识,就不多说了,不了解的请查看开发文档:TP5 行为概述 以下,就由代码来一步一步实现行为 ...

  10. 面向对象特性 - php

    1.类的字段调用格式 公用字段   类内调用 $this->字段名  类外调用 $对象名->字段名 静态  类内调用 self::$字段名   类外调用 类名::$字段名 常量 类内调用 ...