zoukankan      html  css  js  c++  java
  • CSS3 2D 转换

    通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    以下是 2D 转换

    1 translate()
    通过 translate() 方法,元素从其当前位置移动,根据给定的
    left(x 坐标) 和 top(y 坐标) 位置参数:
    transform: translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

    2 rotate()
    通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
    transform: rotate(30deg);把元素顺时针旋转 30 度。

    3 scale()
    通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
    transform: scale(2,4);把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

    4 skew()
    通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
    transform: skew(30deg,20deg);围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

    5 matrix()
    matrix() 方法把所有 2D 转换方法组合在一起。
    matrix(a,b,c,d,tx,ty) 方法需要六个参数
    a, c, b, d是一个二维矩阵:

    ┌       ┐
    │ a b │
    │ c d │
    └      ┘

    tx, ty就是就是基于X和Y 坐标重新定位元素。

    6 transform向元素应用 2D 或 3D 转换。
    7transform-origin改变被转换元素的位置。

  • 相关阅读:
    Qt之等待提示框(QTimer)
    Qt之等待提示框(QPropertyAnimation)
    FormatUtil类型格式转换
    FirstLetterUtil
    文件上传下载
    file相关的操作,(md5,word转html,复制,删除等)
    SessionListener失败,退出
    JackJson的一些方法
    全局常量
    session用户账号认证(一个用户登陆,踢出前一个用户)
  • 原文地址:https://www.cnblogs.com/zhang-dandan-1/p/5820819.html
Copyright © 2011-2022 走看看