首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

矩阵 | matrix()

该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接受了对txty<length>值。

代码语言:javascript
复制
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

代码语言:javascript
复制
<div>Normal</div>
<div class="changed">Changed</div>

CSS

代码语言:javascript
复制
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

结果

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com