Javascript 基于css和js的图像旋转设计

我想通过css和javascript旋转图像。我在css方面没有太多的知识。我尝试了通过

转换
。
我的css：

下面是应用旋转css之前的步骤

下面是应用css后的步骤

我想要这样的输出

编辑：

为了获得更清晰的洞察力，图像旋转工作正常。我在css方面有问题。当我添加css类时，它与顶部按钮重叠。我需要旋转和调整图像的方式，图像永远不会重叠我的按钮和我的页脚

有谁能建议我如何调整图像，使其在旋转后能够调整其位置，并且不会重叠顶部按钮或页脚设计

如有任何建议，将不胜感激
 让我们从给图像一个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">

就这样。
基本上，单击鼠标可以检查图像是否具有旋转类，然后添加/删除它

如果您使用jquery，这就更简单了。如果图像可以有多个类，则需要使用：

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";
    }
}

jshiddle:
添加到第一个答案中

如果你想让旋转也成为动画，你需要添加这一点的CSS

img {
   transition: rotate 0.5s ease; 
}

请注意，您将需要浏览器前缀，以使其在所有CSS3浏览器中工作

更新

由于用户提供了更多信息，这个问题似乎与我回答的问题重复，因为有人可以从这个答案中获得帮助

经过一些研究和来自如此优秀用户的帮助，我找到了这个问题的解决方案

解决方案：

我需要
translateY（-100%）
和transform origin，并需要将最小高度和宽度设置为image container div

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

加载图像后，我通过js设置了最小高度和宽度：

$("#single_image .cropBox img").load(function() {
     $("#single_image").css("minWidth", this.getBoundingClientRect().width)
     $("#single_image").css("minHeight", this.getBoundingClientRect().height)
   });

这是
我不知道你想要什么。你的轮换好像起作用了，不是吗？当我们点击“旋转”按钮时，你想旋转图像吗？我看不出图像的旋转在第一个结果和期望的结果之间有任何区别。对不起，回复太晚了。事实上，我的轮换是有效的。我在css方面有问题。当我添加css类时，它与顶部按钮重叠。我正在编辑我的问题。我想我解决了它：。。需要更多的测试才能确定谢谢你的回答。但实际上我已经做了你回答的事情。我的问题是，在旋转图像后，它被破坏了。这是我的钮扣。你能建议我如何调整图像，在旋转后它将调整他的位置，并且不会重叠顶部按钮或页脚吗？它不会在我的浏览器（chrome）上断开。您可能需要平移旋转的图像并设置变换原点（或将图像容器固定到设置的高度）。我不需要动画。我的问题是，在旋转图像后，它被破坏了。这是我的钮扣。你能建议我如何调整图像，使其在旋转后能够调整其位置，并且不会重叠顶部按钮或页脚吗？我明白，我已经制作了一个小提琴，它再现了我认为你存在的问题。是这个吗？
.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

$("#single_image .cropBox img").load(function() {
     $("#single_image").css("minWidth", this.getBoundingClientRect().width)
     $("#single_image").css("minHeight", this.getBoundingClientRect().height)
   });