Question

我正在尝试使div旋转并沿Y轴移动。我让它单独工作但不是在同一时间。这是我用来旋转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(";"));
}

这非常适合旋转div。如果我为transelateY创建一个新函数。只有transelateY才有效。

关于如何让它发挥作用的任何想法同时？

Answer 1

只需结合效果。这是一个字面上的例子：

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

＆＃13;

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

＆＃13;

<div id="horizon_bg">Translate Me!</div>

＆＃13;

在CSS中使用translate和rotate

1 个答案: