javascript - 通过css和js设计图像旋转

Question

我想通过 css 和 javascript 旋转图像。我对css了解不多。我已经尝试过 transform。我的CSS:

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

这是 fiddle在应用旋转 css 之前。

这里是 fiddle应用CSS后。

我想要这样的输出 attachment

编辑:

为了获得更清晰的洞察力，图像旋转效果很好。我在 css 中遇到问题。当我添加 css 类时，它与顶部按钮重叠。我需要以图像永远不会与我的按钮和页脚重叠的方式旋转和调整图像。

任何人都可以建议我如何调整图像，使其在旋转后会调整其位置并且不会与顶部按钮或页脚设计重叠？

任何建议将不胜感激。

Answer 1

让我们从给图像一个 id 开始:

<img id="image" alt="Web_ileana-d-cruz" class="" src="https://photochute-dev.s3.amazonaws.com/uploads/event_image/image/108/web_ileana-d-cruz.jpg?c=1435318866">

现在只需通过 id 获取图像和旋转按钮，并向旋转按钮添加一个事件监听器:

var image = document.getElementById("image");

var rotateButton = document.getElementById("rotate_image_button");
rotateButton.addEventListener("click", function(e) {
    e.preventDefault();

    if(image.className === "rotate-90") {
        image.className = "";
    } else {
        image.className = "rotate-90";
    }

    return false;
});

就是这样。基本上在点击时检查图像是否具有旋转类，然后添加/删除它。

如果你使用 jquery，这会更简单。如果图像可以有不止 1 个类，那么你需要使用:

if((image.className+" ").indexOf("rotate-90 ") !== -1) {
    image.className = (image.className+" ").replace("rotate-90 ", "");
} else {
    if(image.className) {
        image.className += " rotate-90";
    } else {
        image.className = "rotate-90";
    }
}

JSFiddle:http://jsfiddle.net/wo6mos9r/3/