Manipulate individual CSS transform effects with jquery

Question

If my elements have multiple CSS tranform effects defined, like so:

transform: translate(400px, 40px) scale(1);

But I want to manipulate only one of them, such as changing its translate coordinates without affecting the current value of scale, can I do that with JQuery in a way that won't force me to parse the whole string?

Something similar can already be done with the "class" attribute - I can use hasClass, addClass, removeClass and JQuery will do the parsing for me.

Can I do something similar with the transform CSS pProperty?

maybe you prefer to move the "static" transformation into a class and then modify freely the entire transform with .css('transform', '') — kpull1
– kpull1, Commented Mar 31, 2014 at 10:45
Yes kpull, that is what I ended up doing - ideally I wanted to not store the "scale" value somewhere other than the DOM, but alas this was the most practical way. — Emanuele Ciriachi
– Emanuele Ciriachi, Commented Mar 31, 2014 at 13:50

Xdevelop · Accepted Answer · 2014-03-31 11:10:13Z

1

The better way to do that is mixing CSS and JQuery. I created a fiddle that only use CSS and JavaScript there you can see that using classes it's enought. I recommend to you do that with JQuery cause alow you to do more complex things. Only CSS is not enought for a complex effect and only JQuery isn't efficient encoding.

HTML:

<div id="d1"></div>

CSS:

div{
    position:relative;
    float:left;
    height:100px;
    width:100px;
    background-color:red;
}

.scale{
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
}

.translate{
    -webkit-transform: translate(100px,0); /* Chrome, Safari, Opera */
     transform: translate(100px,0);
}

.scale.translate{
    -webkit-transform: translate(50px,0) scale(0.5); /* Chrome, Safari, Opera */
     transform: translate(50px,0) scale(0.5);
}

JS:

var d1 = document.getElementById("d1");
d1.setAttribute("class","scale");
setTimeout(function(){
    d1.setAttribute("class","translate");
},3000);
setTimeout(function(){
    d1.setAttribute("class","translate scale");
},6000);

answered Mar 31, 2014 at 11:10

Xdevelop

2062 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emanuele Ciriachi Over a year ago

Hi Xdevelop, thanks for the idea but this is not quite I needed - the ability to parametrize the values of the CSS properties is of paramount importance, and having a set of pre-ordained values is just not gonna cut it, no matter how large.

Abraham Brookes · Accepted Answer · 2018-04-26 23:59:03Z

If you're already using jQuery then you might as well use the considerable animation capabilities that come with jQuery by default, and forget about the css properties themselves.

That said, if you're hell bent on having control over the individual transform properties then your best bet is to use nested elements where each element has one transform rule applied:

function translateDiv(){
  var translateDiv = document.getElementById('translate');
  if( translateDiv.classList.contains( 'translate' ) ){
    translateDiv.classList.remove( 'translate' );
  } else {
    translateDiv.classList.add( 'translate' );
  }
}

function rotateDiv(){
  var rotateDiv = document.getElementById('rotate');
  if( rotateDiv.classList.contains( 'rotate' ) ){
    rotateDiv.classList.remove( 'rotate' );
  } else {
    rotateDiv.classList.add( 'rotate' );
  }
}

function scaleDiv(){
  var scaleDiv = document.getElementById('scale');
  if( scaleDiv.classList.contains( 'scale' ) ){
    scaleDiv.classList.remove( 'scale' );
  } else {
    scaleDiv.classList.add( 'scale' );
  }
}

div {
  transition: all 0.3s;
}

#block {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  background-color: #FBCE0C;
  pointer-events: none;
}

.scale {
  transform: scale(0.5);
}

.rotate {
  transform: rotate(45deg);
}

.translate {
  transform: translate(120px, 200px);
}

#btns {
  z-index: 5;
}

<div id="btns">
  <button onclick='translateDiv()'>Translate</button>
  <button onclick='rotateDiv()'>Rotate</button>
  <button onclick='scaleDiv()'>Scale</button>
</div>

<div id="translate">
  <div id="rotate">
    <div id="scale">
      <div id="block">
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Manipulate individual CSS transform effects with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related