css和js的图像旋转设计答案

【问题标题】：image rotation design by css and jscss和js的图像旋转设计
【发布时间】：2015-06-29 17:59:44
【问题描述】：

我想通过 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);
}

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

这是应用 css 后的fiddle。

我想要这样的输出attachment

编辑：

为了更清楚地了解图像旋转工作正常。我在 css 中遇到问题。当我添加 css 类时，它与顶部按钮重叠。我需要以图像永远不会与我的按钮和页脚重叠的方式旋转和调整图像。

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

任何建议将不胜感激。

【问题讨论】：

我不确定你想要什么。你的轮换似乎有效，不是吗？当我们点击“旋转”时，你想旋转图像吗？
我看不出图像在第一个结果和所需结果之间的旋转有任何区别
大家好，抱歉回复晚了。实际上我的轮换是有效的。我在css中有问题。当我添加 css 类时，它与顶部按钮重叠。我正在编辑我的问题。
我想我解决了：jsfiddle.net/wo6mos9r/8 .. 需要更多测试才能确定

标签： javascript html css

【解决方案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/

【讨论】：

感谢您的回答。但我实际上已经做了你回答的事情。我的问题是在旋转图像后它是中断设计。它与我的按钮重叠。你能建议我如何调整图像，在旋转后它会调整他的位置并且不会与顶部按钮或页脚重叠？
它不会在我的浏览器 (chrome) 上中断。您可能需要平移旋转后的图像并设置变换原点（或将图像容器固定到设定高度）

【解决方案2】：

添加到第一个答案；

如果你想让旋转也有动画，你需要添加这个CSS；

img {
   transition: rotate 0.5s ease; 
}

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

更新

根据用户提供的更多信息，此问题似乎与 Rotated elements in CSS that affects their parent's height correctly 重复

【讨论】：

谢谢。我不需要动画。我的问题是在旋转图像后它是中断设计。它与我的按钮重叠。你能建议我如何调整图像，在旋转后它会调整他的位置并且不会与顶部按钮或页脚重叠？
我明白了，我已经创建了一个小提琴来重现我认为你遇到的问题。 fiddle。是这个吗？

【解决方案3】：

我正在回答它，因为有人可以从这个答案中获得帮助。

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

解决方案：

我需要translateY(-100%) 与变换原点，并需要为图像容器 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)
   });

这里是fiddle

【讨论】：