CODEWITHSUNDEEP
javascriptcss
JAR4x4
JAR4x4

Reputation: 11

Using translate and rotate in CSS

I'm trying to make a div rotate and move along the Y axis. I got it to work individually but not in the same time. This is the code i use to rotate the div:

function rotate_horizon_bg(deg){
  var rotate = "rotate(" + (deg) + "deg);";
  var tr = new Array(
    "transform:" + rotate, 
    "-moz-transform:" + rotate,
    "-webkit-transform:" + rotate,
    "-ms-transform:" + rotate,
    "-o-transform:" + rotate
  );


  var horizon_bg = document.getElementById("horizon_bg");
  horizon_bg.setAttribute("style", tr.join(";"));
}

This works perfectly to rotate the div. If I make a new function to transelateY. Only transelateY will work.

Any ideas on how I can get this to work simultaneous?

Upvotes: 1

Views: 1158

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

Just combine the effects. Here's a literal example:

transform: rotate(-45deg) translate(-120px,-30px)


function rotate_horizon_bg(rotateDeg, x, y){
  var horizon_bg = document.getElementById("horizon_bg");
  horizon_bg.style.transform  = "rotate(" + rotateDeg + "deg) translate(" + x + "px, " + y + "px)";
}

rotate_horizon_bg(-30, 3, 3);
<div id="horizon_bg">Translate Me!</div>

Upvotes: 1

Related Questions