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. 测试笔记：本地存储localstorage与sessionstorage

    最近测试的投票项目开发说用的是localstorage.查了下是h5的本地存储.还有个sessionstorage,区别在于sessonstorage关闭页面后清空,localstorage保留. 以 ...

  2. node.js 练习2 (调用函数)

    1. 调用本地 函数 (1)  创建 n2-1.js ,并输入代码 (2) 运行localhhost:8000 (3)在浏览器中 查看 (4)在cmd中查看 2.调用外部 函数 (1) 创建n2-2. ...

  3. 第18章 SysTick—系统定时器—零死角玩转STM32-F429系列

    第18章     SysTick—系统定时器 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  4. 第15章 RCC—使用HSE/HSI配置时钟—零死角玩转STM32-F429系列

    第15章     RCC—使用HSE/HSI配置时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku. ...

  5. JAVA_Converter_字符串类型转Date类型

    我们知道数据库中的时间一般为Date类型,而前台传递过来的为字符串,BeanUtils在封装数据的时候,没有将类型转换,导致报异常... 我们只需要在封装数据之前,使用自定义转换器即可: 代码如下: ...

  6. 开发必看 | iOS开发常用设计模式！

    ios开发学习中,经常弄不清楚ios的开发模式,今天我们就来进行简单的总结和探讨~(一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则: ...

  7. 灵光一现的trick

    感觉平时会丢掉好多挺好的trick…… 图论 1.图G,固定S,T.可以将任意一条边加上权值$k(k>0)$,求最大化加权后最短路. 2.图G,固定S,T.可以将任意一条边乘以权值$k(k> ...

  8. Linux平台下卸载MySQL的方法

    转载自: https://www.cnblogs.com/taomylife/p/7234925.html Linux平台下卸载MySQL的方法: MySQL的安装主要有三种方式:二进制包安装.RPM ...

  9. mysql中列属性

    mysql列属性包括:NULL .default.comment.primary key.unique key 一.NULL定义方式:NULL(默认) NOT NULL 空属性有2个值,mysql数据 ...

  10. datatable中reload和load的区别

    ajax.reload()用于datatable表某个数据的变化而重新加载 ajax.url(url).load() 用于切换url时,datatable重新获取数据,加载.