时间戳

首页 > 解决方案 > 我需要我的两个元素具有相反的变换坐标/方向来拖动功能

javascript - 我需要我的两个元素具有相反的变换坐标/方向来拖动功能

问题描述

document.getElementById("element1").style.transform = document.getElementById("element2").style.transform;

上面的代码将一致地移动它们，但我需要它们向相反的方向移动。我试图弄清楚如何在第二个上乘以 -1，但我得到一个 NAN 或未定义的结果，具体取决于我的操作方式。

标签： javascript

解决方案

使用读取变换矩阵

var el = document.getElementById("element2");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("transform");

tr应该是一个看起来像这样的字符串（假设是 2D 变换类型）

matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)

然后提取这 6 个可能需要一些解析的值（请参见下面的链接）。将每个元素乘以 -1 或执行任何适当的逆运算并将新变换设置为

document.getElementById("element1").style.transform = matrix(a, b, c, d, e, f)

来源：https ://css-tricks.com/get-value-of-css-rotation-through-javascript/

但是，如果您已经定义了element2自己的变换，那么只需将输入反转并element1以相同的方式定义它，而不是尝试从element2.

推荐阅读