How can I get transform and add scale?

Question

I have an object which already has some kind of transform applied (but not scaling) with JavaScript. Mainly these: (translate(69.8671px, 258.873px) translateZ(9999px) rotate(0deg);

What I would like to do is to apply scale to this as well.

I can read object transform with this:

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

Is there a way I could now apply scale to this already existing transforms? I want to do this on mouseenter, mouseleave so I need to remove the scale well later.

Answer 1

It is possible to add multiple values applied one after another. The values must be separated by space. W3docs

You can get the computed style outside of your callback function then run the callback and check the event.type, if mouseenter add the transform to your inline style and concatenate your scale value using the following code:

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

If mouseout, set it back to the original transform variable.

Pure 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 equivalent:

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

As far as I can see you want to do this by hand, because you have some cascading transformations before hand. In that case, initialize a DOMMatrix by hand:

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))

this will give you 4 x 4 transformation matrix:

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

in a 2d matrix, scaleX is a and scaleY is d, likewise in 3d matrix scaleX is m11 and scaleY is m22. So if you want to increase scale by 2, you can:

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

you can also call built in scale3dSelf:

mtrx.scale3dSelf(3)

then compile the object back to string and set it as transform:

el.style.transform = mtrx.toString()

^{Note: Remember that if you multiply like this, your translates are not scaled, if you also want to scale the translates, then you need to multiply 4th col (mX4) as well.}

Answer 3

you can get and set css property of an element using css() method in jQuery. Here is documentation link: https://api.jquery.com/css/

here is my example:

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>