刚开始接触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. C++ 类中的引用成员变量初始化

    刚遇到一个问题,需要的类成员为指针的引用,而引用不能在构造函数里初始化,必须在初始化列表中进行初始化,并且需要该引用在构造函数中的形参必须为引用形式 1: class ThreadParam { 2: ...

  2. Openjudge-计算概论（A）-判断闰年

    描述: 判断某年是否是闰年.输入输入只有一行,包含一个整数a(0 < a < 3000)输出一行,如果公元a年是闰年输出Y,否则输出N样例输入 2006 样例输出 N 提示:公历纪年法中, ...

  3. Adobe flash CC 汉化破解方法

    转载整理自:http://www.sdifenzhou.com/flashprofessionalcc.html 断网,解压下载的破解dmg文件得到这些文件 第一步,解压安装包,安装,并打开,不要输入 ...

  4. phabricator 搭建

    os:debian7 Installation Guide :https://secure.phabricator.com/book/phabricator/ $ cd /data # 安装目录 da ...

  5. 《JavaScript高级程序设计》读书笔记 ---语句

    do-while语句do-while 语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.换句话说,在对条件表达式求值之前,循环体内的代码至少会被执行一次.以下是do-whil ...

  6. 【bug】Unable to execute dex: Multiple dex files define

    This is a build path issue. Make sure your bin folder is not included in your build path. Right clic ...

  7. android 按钮Button单击背景切换

    res/drawable/btn_selected.xml <?xml version="1.0" encoding="utf-8"?> <s ...

  8. JQuery中常用方法备忘

    本文转载自博客园,原文地址 http://www.cnblogs.com/xzf158/archive/2008/10/14/logan.html 1.Window.onload 的JQuery方法 ...

  9. CentOS,Ubuntu,Gentoo,Freebsd,RedHat,Debian的区别及选择

    Linux最早由Linus Benedict Torvalds在1991年开始编写.在这之前,Richard Stallman创建了Free Software Foundation(FSF)组织以及G ...

  10. thinkphp 实现微信公众号开发（二）--实现自定义菜单

    IndexController.class.php <?php namespace Home\Controller; use Think\Controller; class IndexContr ...