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. vue项目里的日期格式化（摘录）

    export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date. ...

  2. 问答 请问使用OK("raw:jpg")能返回多张图片吗

     请问使用OK("raw:jpg")能返回多张图片吗  发布于 28天前  作者 qq_3aeeb0ad  78 次浏览  复制  上一个帖子  下一个帖子  标签: 无 @At( ...

  3. 【[TJOI2018]异或】

    写板子了,可持久化\(Trie\)的板子了 其实和主席树写法类似,还是存好左右儿子之后存好权值 之后差分去查询就好了 这道题第一问我们直接\(dfs\)序转化成区间 第二问搞成\(x,y,lca(x, ...

  4. 20145238-荆玉茗《Java程序设计》课程总结

    每周读书笔记链接汇总 第一周读书笔记: 第二周读书笔记: 第三周读书笔记: 第四周读书笔记: 第五周读书笔记: 第六周读书笔记: 第七周读书笔记: 第八周读书笔记: 第九周读书笔记: 实验报告链接汇总 ...

  5. @NotEmpty@NotNull和@NotBlank的区别

    这几个可以为对象,不只是字符串 1.@NotNull 不能为null,但可以为empty (""," "," ") 2.@NotEmpty ...

  6. 一步步做程序优化-讲一个用于OpenACC优化的程序（转载）

    一步步做程序优化[1]讲一个用于OpenACC优化的程序 分析下A,B,C为三个矩阵,A为m*n维,B为n*k维,C为m*k维,用A和B来计算C,计算方法是:C = alpha*A*B + beta* ...

  7. 第41章 RS-485通讯实验—零死角玩转STM32-F429系列

    第41章     RS-485通讯实验 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fir ...

  8. input的类型为number，限制输入的数字位数

    <input type="text"  maxlength="5" />   效果ok,当 <input type="number& ...

  9. python基础数据类型之字典的操作

    一. 字典的简单介绍字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是唯一的. 在保存的时候, 根据key来计算出一个内存地址. 然后将key- ...

  10. SpringMVC注解@RequestParam解析

    1.可以对传入参数指定参数名 1 @RequestParam String inputStr 2 // 下面的对传入参数指定为param,如果前端不传param参数名,会报错 3 @RequestPa ...