我怎样才能得到变换和增加比例？

Question

我有一个对象，它已经使用 JavaScript 应用了某种变换（但没有缩放）。主要是这些： (translate(69.8671px, 258.873px) translateZ(9999px) rotate(0deg);

我想做的是将比例也应用于此。

我可以用这个来读取对象变换：

var style = window.getComputedStyle($(this)[0]);
var matrix = new WebKitCSSMatrix(style.transform);

现在有没有办法可以将缩放应用到这个已经存在的转换？我想在 mouseenter、mouseleave 上执行此操作，所以我需要稍后移除刻度。

Answer 1

可以添加一个接一个应用的多个值。这些值必须用空格分隔。 W3docs

您可以在回调函数之外获取计算的样式，然后运行回调并检查 event.type，如果 mouseenter 将转换添加到您的内联样式并 使用以下代码连接您的 scale 值：

e.target.style.transform = `${transform} scale(1.5)`

如果mouseout，将其设置回原来的transform变量。

纯 JavaScript：

const box = document.querySelector('.box')

const transform = getComputedStyle(box).getPropertyValue('transform')

function scale(e) {
  e.type === 'mouseenter' ?
    e.target.style.transform = `${transform} scale(1.5)` : 
    e.target.style.transform = `${transform}`
}

box.addEventListener('mouseenter', scale)
box.addEventListener('mouseout', scale)

:root {
  --width: 200px;
}

.box {
  width: var(--width);
  height: 200px;
  background-color: red;
  transform: translateX(calc(50vw - calc(var(--width)/2))); 
  transition: transform ease-in-out 1s;
  transform-origin: top center;
}

<div class="box"></div>

jQuery 等价物：

const $box = $('.box')

const transform = $box.css('transform')

function scale(e) {
  e.type === 'mouseenter' ?
    $(this).css('transform', `${transform} scale(1.5)`) : 
    $(this).css('transform', transform)
}

$box.on('mouseenter', scale)
$box.on('mouseout', scale)

:root {
  --width: 200px;
}

.box {
  width: var(--width);
  height: 200px;
  background-color: red;
  transform: translateX(calc(50vw - calc(var(--width)/2))); 
  transition: transform ease-in-out 1s;
  transform-origin: top center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

Answer 2

据我所知，您想手动执行此操作，因为您事先进行了一些级联转换。在这种情况下，手动初始化一个 DOMMatrix：

let mtrx =new DOMMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.8671, 258.873, 9999, 1)"
    .replace(/matrix3d\s*\(|\)/gi,"")
    .split(",")
    .map(d => +d))

这将为您提供 4 x 4 转换矩阵：

|m11  .  . .
|m21 m22 . .
|m31 m32 . .
|m41  .  . .

在 2d 矩阵中，scaleX 是 a，scaleY 是 d，同样在 3d 矩阵中，scaleX 是 m11，scaleY 是 m22。因此，如果您想将 scale 增加 2，您可以：

mtrx.m11 *= 2 //scaleX
mtrx.m22 *= 2 //scaleY
mtrx.m33 *= 2 //scaleZ

你也可以调用内置scale3dSelf:

mtrx.scale3dSelf(3)

然后将对象编译回字符串并将其设置为转换：

el.style.transform = mtrx.toString()

笔记： 请记住，如果您像这样相乘，您的平移不会缩放，如果您还想缩放平移，那么您还需要乘以第 4 列 (mX4)。

Answer 3

您可以使用 jQuery 中的 css() 方法获取和设置元素的 css 属性。 这是文档链接：https://api.jquery.com/css/

这是我的例子：

let cssVal = null;

      yourMouseEnterFunction = function () {
        // setting of box element's css property (background-color) to blue
        $(".box").css("background-color", "blue");
        // setting of box element's css property (transform) to rotate(20deg)
        $(".box").css("transform", "rotate(20deg)");
        cssVal = getCssVal(".box", "transform");
        $("#result").text(cssVal);
      };

      yourMouseLeaveFunction = function () {
        // setting of box element's css property (background-color) to red
        $(".box").css("background-color", "red");

        // setting of box element's css property (transform) to rotate(0deg)
        $(".box").css("transform", "rotate(0deg)");
        cssVal = getCssVal(".box", "transform");
        $("#result").text(cssVal);
      };

      getCssVal = function (selector, propertyName) {
        return $(selector).css(propertyName);
      };

      $(document).ready(function () {
        // adding eventhandlers
        $(".box").mouseenter(yourMouseEnterFunction);
        $(".box").mouseleave(yourMouseLeaveFunction);

        // getting css property value of height from .box element
        var defaultHeight = getCssVal(".box", "height");
        $("#defaultResult").text(defaultHeight);
      });

  .box {
        height: 150px;
        width: 150px;
        background-color: plum;
        transform: translate(69.8671px, 258.873px);
        transform: translateZ(9999px);
        transform: rotate(0deg);
      }

 <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<label>
Default value of (height) on init: <span id="defaultResult"></span>
</label>
<br />
<label>Css Value of (transform) : <span id="result"></span>
</label>
<div class="box"></div>