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. 将ojdbc 添加到maven

    去oracle官网下载jar包 然后在jar包所在目录输入maven命令 mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdb ...

  2. 51nod 1135 原根(原根)

    题意 题目链接 Sol 可以证明素数的原根不会超过他的\(\frac{1}{4}\) 那么预处理出\(P - 1\)的所有的质因数\(p_1, p_2 \dots p_k\),暴力判断一下,如果$\e ...

  3. cf1043D. Mysterious Crime(枚举)

    题意 题目链接 给出\(m\)个长度为\(n\)的排列,问有多少连续公共子串 \(m \leqslant 10, n \leqslant 10^5\) Sol 非常naive的一道题然而交了3遍才过( ...

  4. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    viewport:移动设备上用来显示网页的那部分区域,但其大小并不局限于那部分可视区域 width设置layout viewport  的宽度,为一个正整数,或字符串"device-widt ...

  5. matlab练习程序（三角形外接圆）

    三角形两边的垂直平分线就能确定外接圆. 结果如下: matlab代码如下: clear all;close all;clc; p=rand(,); %(x,y) cen1=(p(,:)+p(,:))/ ...

  6. Visio2010新建E-R图

    visio2010没有内置E-R图的模板,需要自己配置模具.步骤如下: 1.文件->新建->基本流程图->右键菱形->添加到新模具->命名为E-R图. 2.更多形状-&g ...

  7. 【Leetcode】【Medium】Generate Parentheses

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  8. 用CSS写扫描二维码图标

    代码如下: <style>.icon{margin:300px;width:30px;height:30px;position:relative}.icon .b{border:2px s ...

  9. The categories of Reinforcement Learning 强化学习分类

    RL分为三大类: (1)通过行为的价值来选取特定行为的方法,具体 包括使用表格学习的 q learning, sarsa, 使用神经网络学习的 deep q network: (2)直接输出行为的 p ...

  10. 二、基于事件的异步编程模式(EAP)

    一.引言 在上一个专题中为大家介绍了.NET 1.0中提出来的异步编程模式--APM,虽然APM为我们实现异步编程提供了一定的支持,同时它也存在着一些明显的问题--不支持对异步操作的取消和没有提供对进 ...