关于 CSS 中的 transform: rotate，我的需求如此简单，却找不到优雅的解法

CSS 中的 transform 属性允许你旋转，缩放，倾斜或平移给定元素

我要写个脚本给图片添加旋转功能，用来快速处理那些方向错误的贴图

示例代码

<!DOCTYPE html>
  <head>
    <script>
      window.onload = () => {
        [].slice.call(document.images).forEach( img => {
          let degree = 0 ;
          img.onclick = () => {
            degree = ( degree + 90 ) % 360 ;
            img.style = `transform: rotate(${ degree }deg);`;
          };
        } );
      };
    </script>
  </head>
  <body>
    <div>
      <img src="https://www.v2ex.com/static/img/v2ex@2x.png" />
    </div>
    <div>
      <img src="https://www.v2ex.com/static/img/v2ex@2x.png" />
    </div>
    <div>
      <img src="http://gzimg.focus.cn/upload/photos/20718/OoQdAPDw.jpg" />
    </div>
    <div>
      <img src="http://gzimg.focus.cn/upload/photos/20718/OoQdAPDw.jpg" />
    </div>
  </body>
</html>

图片点击旋转后的效果图

简单的说就是，希望旋转的图片，能够像真的在数据层面旋转过一样，正确占据容器中的空间

实际情况是，CSS 旋转的图片被绘制在一个单独的层中，排版上独立于 DOM

没有没什么简单优雅的做法可以实现这个需求？

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/528872