刚开始接触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. 网络通信框架Apache MINA

    Apache MINA(Multipurpose Infrastructure for Network Applications) 是 Apache 组织一个较新的项目,它为开发高性能和高可用性的网络 ...

  2. 1.建立exception包,编写TestException.java程序，主方法中有以下代码，确定其中可能出现的异常，进行捕获处理。

    package d0923; public class TestException { public static void main(String[] args) { for(int i=0;i&l ...

  3. Valgrind: memcheck of memleak/mem-uninitialization; massif usage

    first install valgrind, its newest ver is 3.11, and stops updating since 2015/12. in centos, yum ins ...

  4. 嵌套json的查询

    postgres=# SELECT  t.data->'objects'->1->'src' AS ctFROM   reports as t     , json_array_el ...

  5. js或jquery实现图片轮播

    如: 1.//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index =  ...

  6. μCos-ii学习笔记2_任务管理

    二.任务管理 任务管理是ucos-ii操作系统的核心内容.这一章大致就以下流程来介绍和总结任务管理的相关知识. 要实现复杂任务管理,必然要定义众多数据来描述任务状态,为了精简,建立了许多不同的数据结构 ...

  7. 第三十六节，os系统级别操作模块

    在使用os模块时需要先 import os 引入模块 os.getcwd()模块函数 功能:获取当前工作目录,即当前python脚本工作的目录路径[无参] 使用方法:os.getcwd() 格式如:a ...

  8. 第九节，基本条件语句if

    条件语句 如果我们希望有效的响应用户的输入,代码就需要具有判断能力.能够让程序进行判断的结构成为条件,条件判断语句返回的是布尔值真或假,真就执行一条线路,假就执行另外一条线路 注意if判断如果怎样,否 ...

  9. /etc/fstab 文件解释

    /etc/fstab 文件解释 文件fstab包含了你的电脑上的存储设备及其文件系统的信息.它是决定一个硬盘(分区)被怎样使用或者说整合到整个系统中的唯一文件. 这个文件的全路径是/etc/fstab ...

  10. POJ 1062 昂贵的聘礼（dij+邻接矩阵）

    (￣▽￣)" #include<iostream> #include<cstdio> #include<cstring> #include<cstd ...