4 input & Dynamically change transform

Question

I'm trying to make a transform generator.

Users will constantly update this, but without success. Because when I use jquery element.css('transform', .... it changes it to singleton. But, I can't change other elements.

HTML

ROTATE X
 
ROTATE Y
 
SKEW Y
 
SKEW X
 


ROTATE X

ROTATE Y

SKEW Y

SKEW X

JS

$('input[type="range"]').on('input change', function(){
switch (this.name){
case "transformRx":
      calculateMatrix(this.className, this.value, null, null, null)
break;
case "transformRy":
  calculateMatrix(this.className, null, this.value, null, null)
  break;
case "transformSy":
  calculateMatrix(this.className, null, null, this.value, null)
  break;
case "transformSx":
  calculateMatrix(this.className, null, null, null, this.value)
  break;
}})

function calculateMatrix(elName, rotateX, rotateY, skewY, skewX) {
if (elName != "undefined") {
$('#'+elName).css('transform', ''rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) skewX('+skewX+'deg) skewY('+skewY+'deg)')
}
}

JSFIDDLE

I'm just trying to ask a question and had to make a bunch of edits to post a question.

There may be things I forgot.

user_14367416 · Answer

This is what you want?

you cant add multiple transform in an element so you have to create all the transformation in one string.

var transform = [];

function updateCss(This) {
  // console.log(This);
  const type = $(This).data("type");
  const end = $(This).data("end");
  const value = $(This).val();
  let transform_string = "";
  transform[type] = `${type}(${value}${end})`;

  Object.keys(transform).forEach((item, index, array) => {
    transform_string += transform[item];
  });
  $('#inputrange').css("transform",transform_string);
}

#inputrange{
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange{
  width: 5rem;
  height: 100%;
  background: purple;
}
#inputrange2{
  margin-top: 5rem;
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange2{
  width: 5rem;
  height: 100%;
  background: purple;
}


ROTATE X
 
ROTATE Y
 
SKEW Y
 
SKEW X

4 input & Dynamically change transform

1 Answers