zoukankan      html  css  js  c++  java
  • 关于transform的2D

    在transform的学习中,自己总结了一点经验。

      我们知道transform有2D和3D的两大类变换,这里分享下关于2D的属性简单示例;

    一、2D变换:  (x为水平,y为垂直)

    1、skew(斜拉)      

    • 它的值是以角度表示,单位deg;以原点为基准,围绕 X 轴和 Y 轴按照一定的角度倾斜;
    • 可能会改变元素的形状;
    • 斜拉可以写成skew(x轴的夹角,y轴的夹角),或者skewX(xdeg),skewY(ydeg)。

    A.示例图:(注!本例中的基准点是左上角,只为方便对比查看)

    2、scale(缩放)

    • 根据给定的宽度(X 轴)和高度(Y 轴);
    • scale(x) 或者 scale(x,y), 一个参数时,第二个参数默认与第一个值相等;

    • 取值0~1;
    • 还可以是scaleX(x)和scaleY(y);

    B.示例图:

    3、rotate(旋转) 

    • 根据原点,将元素按照顺时针旋转给定的角度
    • 允许负值,元素将逆时针旋转

    C.示例图:

    4、translate(位移)

    • 将元素从其当前位置移动
    • 移动到 x 坐标和 y 坐标位置参数
    • 取值数值、百分比,也可以是负值
    • translateX(x),translateY(y)

    D.示例图:

    对于transform的2D简单介绍就是这样了。下次,我们看看2D里更高阶的matrix()矩阵变换。

     

  • 相关阅读:
    单例
    Label自适应高度
    通知中心(以夜间模式为例)
    ios VFL屏幕自适应
    网络请求数据(同步POST,异步POST)
    linux 设备文件
    linux 文件存取 软硬联接的区别
    linux 磁盘管理与文件系统
    linux开机过程
    Build Antlr4 projects with eclipse java project template.
  • 原文地址:https://www.cnblogs.com/LJY0596/p/5665366.html
Copyright © 2011-2022 走看看