jquery - jquery中的可旋转非零角度

Question

这个问题与我之前的帖子Rotate the inner box as I rotate the outer box 相关。

这一次，我添加了transform:rotate(ndeg);wheren不等于 0。这个问题的目的是最初以n度数旋转div 。

$(function() {
  // Prepare extra handles
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').rotatable({
    rotate: function(event, ui) {
      var angle = ui.angle.current;
      $('.inner').css('transform', 'rotate(' + angle + 'rad)');
    }
  });
  // Assign coordinate classes to handles
  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");
  // Assign handles to box
  $(".box").append(nw, ne, se);
  // Assigning bindings for rotation event
  $(".box div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
    $('.box').rotatable("instance").startRotate(e);
  });
});

.box {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background: transparent;
  margin: 40px;
  position: absolute;
  transform: rotate(315deg);
}

.inner {
  background: red;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 57px;
  left: 57px;
  transform: rotate(315deg);
}

.ui-rotatable-handle {
  background: url("https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/rotate.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25px;
  width: 25px;
  position: absolute;
}

.ui-rotatable-handle-sw {
  bottom: -27px;
  left: -27px;
}

.ui-rotatable-handle-nw {
  top: -27px;
  left: -27px;
}

.ui-rotatable-handle-se {
  bottom: -27px;
  right: -27px;
}

.ui-rotatable-handle-ne {
  top: -27px;
  right: -27px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<div class="box-wrapper">
  <div class="inner">
    RED BOX
  </div>
  <div class="box">
  </div>
</div>

这是完整的代码https://jsfiddle.net/pknwe954/1/

注意：HTML 的结构应该和原来的一样，所以不需要改变它。

问题：如何修复n度数上的可旋转 div？

标签： jquery