zoukankan      html  css  js  c++  java
  • css3 2D变换

         css3中, 最常用的2D静态变换有一下5种,他们都包含在transform方法中

      * translate()

      * rotate()

      * scale()

      * skew()

      * matrix()

    下面来逐一介绍

     translate()方法

    通过translate()方法,元素从当前位置发根据传如入的2个参数(x坐标,y坐标)发生位移。

     例如:transform(50px,100px)     //元素向左偏移50px,向下偏移100px

    rotate()方法

    通过rotate()方法,元素顺时针旋转参数指定的角度,如果参数传入是负值,元素将逆时针旋转。

    例如:transform:rotate(30deg);    //元素顺时针旋转30度。

                transform:rotate(30deg);   //元素逆时针旋转30度。

    scale()方法

    通过scale()方法,元素的尺度会增加或减少,根据参数传入的宽度倍数和高度倍数发生变化。

    例如: transform:scale(2,4);       //元素宽度转换成原来尺度的2倍,高度转换为原来高度的4倍。

    skew()方法

    通过skew()方法,元素翻转给定的角度,根据参数传入的水平线(x轴)和垂直线(y轴)翻转。

    例如:transfrom:skew(30deg,20deg);    //元素围绕x轴吧元素翻转30度,围绕y轴翻转20度。

    matrix()方法

    matrix()方法实质是将上面的旋转,缩放,位移以及倾斜方法合在一个元素。其要求元素传进6个参数。

  • 相关阅读:
    创建react项目
    解决移动端弹窗下页面滚动问题
    前端常用的几种加密方式
    http请求状态码
    vue代理配置
    自动化测试实操案例详解 | Windows应用篇
    Google 再见 Java
    一次诡异的 SQL 数量统计查询不准的问题
    Maven
    淘宝技术分享:手淘亿级移动端接入层网关的技术演进之路
  • 原文地址:https://www.cnblogs.com/binguo666/p/7568673.html
Copyright © 2011-2022 走看看