Question

我正在使用CSS变换矩阵作为transform: matrix(1.15782, 0, 0, 1.15782, -82.5232, -137.397);来缩放和移动元素。我想获得元素转换后的实际像素数。

如果我使用

`const style = getComputedStyle(element);
  const matrix = new WebKitCSSMatrix(style.webkitTransform);
  return {left: matrix.m41, top: matrix.m42};`

我得到的值为{left: -82.5232, top: -137.397}，但我想将其转换为实际的px值。

是否有可能或还有其他方法可以使元素的顶部和底部离开。我已经尝试过offsetTop & offsetLeft，但没有用。

Answer 1

在顶部使用matrix.m42 / element.offsetTop，在左侧使用matrix.m41 / element.offsetLeft

var element=document.getElementsByClassName("changed")[0];
const style = getComputedStyle(element);
const matrix = new WebKitCSSMatrix(style.webkitTransform);

var leftElem = matrix.m41 / element.offsetLeft;
var topElem = matrix.m42 / element.offsetTop;
console.log(leftElem +'px , top:' +topElem + 'px');

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

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

Answer 2

看起来我只需要使用scale和translate属性即可获得实际的像素，如下所示。

const style = getComputedStyle(element);
const matrix = new WebKitCSSMatrix(style.webkitTransform);
const scale = matrix.m11;
return {left: matrix.m41*scale, top: matrix.m42*scale};

CSS将矩阵转换为像素

2 个答案: