刚开始接触CSS3的2D变换属性，就被这个skew（）搞的一头雾水，不知道具体是怎么变化的！

研究了一会才发现，CSS3的斜切坐标系和数学中的坐标系完全不一样（设置斜切原点为左上角）

<style>

div{

            width: 200px;

            height: 200px;

            transition:all 2s;

            margin: 150px auto;

        }

.div1{

        background-color: #f00;

    }

.div2{

        background-color: #0f0;

    }

</style>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

</body>

下面我们设置鼠标经过时的skew（0，30deg）属性

.div1:hover {

            transform:skew(0,30deg);

            transform-origin: left top;

        }

移入前

移入后

通过两幅图可以看出，skew（0，30deg）；是按照水平方向Y轴，顺时针旋转　　

下面我们设置鼠标经过时的skew（30deg，0）属性

.div2:hover {

            transform:skew(30deg,0);

            transform-origin: left top;

        }

移入前

移入后

通过两幅图可以看出，skew（30deg，0）；是按照垂直方向X轴，逆时针旋转

CSS3中的skew（）属性的更多相关文章

  1. CSS3 transform的skew属性值图文详解

    我刚刚接触transform的skew属性值时一头雾水,根本不知道种东西到底是咋变的.上网查,各个网站上也只说这个使用来做扭曲变换的,具体是咋变的就是不说....无奈我只好自己研究了,现把研究结果共享 ...

  2. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  3. CSS3中哪些新属性—阴影、文本省略（1）

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

  4. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  5. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  6. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  7. CSS3中的一些属性

    1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...

  8. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

  9. css3中的圆角属性

    圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...

随机推荐

  1. MC- 交易并设置止损

    using System; using System.Drawing; using System.Linq; using PowerLanguage.Function; using ATCenterP ...

  2. Position & anchorPoint 深入

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  3. wireshark 包过滤

    tcp.port == 443 or udp.port==443 or tcp.port==53 or udp.port==53

  4. JVM垃圾收集算法（标记-清除、复制、标记-整理）

     [JVM垃圾收集算法] 1)标记-清除算法: 标记阶段:先通过根节点,标记所有从根节点开始的对象,未被标记的为垃圾对象(错了吧?) 清除阶段:清除所有未被标记的对象 2)复制算法: 将原有的内存空间 ...

  5. 自定义UICollectionView

    1.创建一个UICollectionView工程,点击鼠标右侧按钮选择New File->Cocoa Class->点击Next,Class选项填写一个合理的名称,如:MyCollecti ...

  6. 转：应用JMeter测试solr请求

    使用JMeter测试solr请求 一.安装JMeter 在官网http://jmeter.apache.org/download_jmeter.cgi下载JMeter 直接解压JMeter安装包 Li ...

  7. 转：JDBC驱动配置相关

    1.做JDBC请求 ,首先要了解这个JDBC对象是什么,现在以SQLServer为例来说明 首先下载对应的数据库驱动(百度“jdbc sqlserver驱动”,然后下载). 注意 :下载完成后,直接把 ...

  8. 美版MC 使用

    备份 C:\ProgramData\TS Support\MultiCharts .NET\StudyServer\Techniques\CS pledit 无法打开 解决方法 regedit hke ...

  9. 解决mac下atom安装插件失败问题

    activate-power-mode的超炫编辑效果打动了我,花时间安装了atom,之后在package,install里面找到了这个插件,但是安装失败,如下图所示: gyp info it work ...

  10. insertRule()与addRule()创建规则

    要向现有的样式表中添加新规则,需要使用insertRule()方法.这个方法接受两个参数:规则文本和表示在那里插入规则的索引.下面是一个例子: sheet.insertRule("body ...