将图像旋转不同角度的功能答案

【问题标题】：Function to rotate an image various degrees将图像旋转不同角度的功能
【发布时间】：2015-07-15 16:47:47
【问题描述】：

我正在编写一项研究实验，其中可以显示几个预加载的图像之一以 45 度的倍数旋转。有没有这样做的功能，所以我可以说

var img45 = function(img, deg) { ...

我需要能够将预先旋转的图像作为变量传递给不同的函数。

我不能使用 CSS 的变换，因为同一个图像需要在几个不同的角度可用，而且我不能只变换画布显示，因为我需要预先旋转的图像作为变量。

Rotate() 有效，但不允许我将图片分配给新变量，而是修改原始图像，这不是我想要的（我需要原始图像未修改）。

【问题讨论】：

标签： javascript php image image-rotation

【解决方案1】：

var img45 = function(img_id, angle) {
    $('#'+img_id).rotate(angle);
}

这是你需要的吗？它是 jQuery，所以你需要包含 jQuery 的库。

【讨论】：

【解决方案2】：

这样的？

// Function to rotate element.
var rotate = function(elem, deg) {
  elem.style.transform = 'rotate(' + deg + ')';
}

// Test rotating boxes
var boxes = document.querySelectorAll('.box');
for (var i = 1; i <= boxes.length; ++i) {
  rotate(boxes[i], (5 * i) + 'deg');
}

.box {
  width: 128px;
  height: 128px;
  border: 1px solid #ddd;
  margin: 10px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

【讨论】：