1、作用
   改变元素在页面中的形状
2、语法
   属性：transform
   函数：
      1、skew(xdeg)
         向横向倾斜指定度数
         x取值为正，X轴不动，y轴逆时针倾斜一定角度
         x取值为负，X轴不动，y轴顺时针倾斜一定角度
         skew(30deg)
      2、skew(xdeg,ydeg)
         ydeg : 纵向倾斜度数
         y取值为正，y轴不动,x轴顺时针倾斜一定角度
         y取值为负，y轴不动,x轴逆时针倾斜一定角度
      3、skewX(xdeg)
      4、skewY(ydeg)
 3.应用和理解
  <!doctype html>
<html lang="zh-cn">
   <head>
      <title>Insert a title</title>
      <meta charset="utf-8">
      <style>
         #d1,#d2{
            width:200px;
            height:200px;
            position:absolute;
            left:400px;
            top:200px;
         }
         #d1{
            background-color:#ddd;
            border:1px solid #333;

         }
         #d2{
            background-color:pink;
            border:1px solid orange;
            opacity:0.5;
            transform:skew(45deg);
         }
      </style>
   </head>
   <body>
      <div id="d1">参考元素</div>
      <div id="d2">转换元素</div>
   </body>
</html>
效果图：

效果图解析：

图形解析理解 css3 之倾斜属性skew()的更多相关文章

  1. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  2. 如何理解 css3 的 perspective 属性

    一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...

  3. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  6. CSS3动画相关属性详解

    本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...

  7. 理解CSS3属性transition

    一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...

  8. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

随机推荐

  1. maven更改仓库地址

    安装maven后,maven的默认的仓库地址在  C:\Users\Administrator\.m2\repository 修改maven的仓库地址的步骤是,1.在某个盘符下建立一个文件夹,当做现在 ...

  2. PHP框架中.htaccess文件作用

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体地怎样接待它,就是此文件的 ...

  3. JavaWeb中Servlet和JSP的分工案例

    jsp和Servlet的分工:   * JSP:     > 作为请求发起页面,例如显示表单.超链接.     > 作为请求结束页面,例如显示数据.   * Servlet:     &g ...

  4. html dl dt dd 标签语法与使用

    一.dl dt dd认识 html <dl> <dt> <dd>是一组合标 […]

  5. QT 定时执行某个函数，隐藏某个控件

    QTimer::singleShot(3000, this, SLOT(slotHideFinishedLabel())); // 这里是一个3秒定时器, 且只执行一次. #include " ...

  6. c++实现对输入数组进行快速排序

    #include "stdafx.h" #include <iostream> #include <string> #include <vector& ...

  7. Eclipse控制台输出信息的控制(引用其他人的博客)

    当你在Eclipse中 running/debugging一个应用程序的时候,有关该应用程序的运行调试信息及日志信息都会输出到控制台(console )显示,但是Eclipse只会显示最后一部分的日志 ...

  8. Day03——Python函数

    函数定义和使用 1.语法 def 函数名(参数): ... 函数体 ... 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行 ...

  9. CentOS7 安装tomcat为系统服务器 Systemctl管理Tomcat,并设置开机启动

    本文转载:http://blog.chinaunix.net/uid-24648266-id-5729891.html CentOS7开始,从/etc/init.d脚本改为了systemctl管理服务 ...

  10. 使用FMDB最新v2.3版本教程

    使用FMDB教程 本教程针对于第一次接触开源库FMDB的同胞,从如何下载源码如何导入工程如何创建数据库如何写增删改查开始.使用的时最新版本的FMDB v2.3. 此教程开始日期为 2014.5.5 P ...