Update the rotate() property within a transform attribute using JavaScript

Question

How do I only update the rotate(19deg) property within the transform attribute without affecting the translate3d(), translate() properties?

Below is my divs property. I would like to manipulate just the rotate() property using JavaScript so the other properties are left as they are.

transform: translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);

So after updating using JavaScript, my divs transform property will look like this:

transform: translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px);

Notice the rotate(0deg)

Thanks guys

You would need to do something like in [this answer](http://stackoverflow.com/questions/30010523/add-a-transform-value-to-the-current-transforms-that-are-already-on-the-element/30010571#30010571). Basically extract the current transform value, check with regex and replace as appropriate. — Harry, Mar 07 '16 at 13:40
@Harry yes I did think of this but was hoping for a much simpler way! — Cecil Theodore, Mar 07 '16 at 13:48
@CecilTheodore: I don't think there is any simpler way. In fact if the original transform is set through CSS (and we have to use `getComputedStyle` for getting the original transform value), it gets more trickier because it would return a matrix equivalent that would need reconstruction. — Harry, Mar 07 '16 at 13:49
@Harry there is a simpler way of getting the transform value - jqueryObject.context.style.transform — Cecil Theodore, Mar 07 '16 at 13:50

score 0 · Answer 1 · answered Mar 07 '16 at 14:38

If your idea is to leave the element in 0deg position with no option to return back to 19deg via click, you could go with:

HTML:

<div id="rotateme">
  <p class="clickme">Click Me</p>
</div>

CSS:

#rotateme {
  background-color: blue;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
  -ms-transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
  transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
}

.clickme {
  text-align: center;
  padding-top: 80px;
  color: #fff;
  font-size: 20px;
}

jQuery:

$('.clickme').click(function() {
  $("#rotateme").css("-webkit-transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
  $("#rotateme").css("transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
  $("#rotateme").css("-ms-transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
});

I did not use the exact values you asked as it would push the box below the visible area (at least with my current Codepen set up), but you can see which one require change. Also, I'm using transition for smooth rotation and prefixes so it would work on all modern browsers.

Codepen example is available here.

Thanks for attempting, but the issue with this implementation is it does not account for the fact the translate, translate properties will always be changing. — Cecil Theodore, Mar 07 '16 at 14:44
Sorry if I wasn't clear initially. but the translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px) can all change. So I will be interacting with a div that will not have static translate3d() and transform() values — Cecil Theodore, Mar 07 '16 at 14:46
the div has the ability to be rotated using an external source thus changing the translate3d() and transform properties — Cecil Theodore, Mar 07 '16 at 15:24

Update the rotate() property within a transform attribute using JavaScript

1 Answers1