矩阵 | matrix() (Transforms) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    矩阵 | matrix() (Transforms) - CSS 中文开发手册

    该matrix() CSS函数定义了一个齐次2D变换矩阵。

    注意: matrix(a, b, c, d, tx, ty)是matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的一个简写。

    语法

    该matrix()功能是用六个值指定的。常量值是隐含的,不作为参数传递; 其他参数按列主要顺序进行描述。

    注:直到Firefox 16,Gecko接受了对tx和ty的<length>值。

    matrix(a, b, c, d, tx, ty)

    可能值

    abcd是描述线性变换的<number>.txty是描述平移的<number>

    Cartesian coordinates on ?2

    Homogeneous coordinates on ??2

    Cartesian coordinates on ?3

    Homogeneous coordinates on ??3

    ac bd

    actxbdty001

    actxbdty001

    ac0txbd0ty00100001

    | a b c d tx ty |

    实例

    HTML

    <div>Normal</div>
    <div class="changed">Changed</div>

    CSS

    div {
      width: 80px;
      height: 80px;
      background-color: skyblue;
    }
    
    .changed {
      transform: matrix(1, 2, -1, 1, 80, 80);
      background-color: pink;
    }

    结果

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32155.html

    矩阵 | matrix() (Transforms) - CSS 中文开发手册 - Break易站

    上一篇:用多列布局 | CSS Columns: Using multi-column layouts (Multi-column Layout) - CSS 中文开发手册 - Break易站


    下一篇:滤镜 | mask (Scalable Vector Graphics) - CSS 中文开发手册 - Break易站