js控制图片旋转(点击一下按钮就旋转90度)的问题

请问怎么实现,点击一次按钮,图片旋转90度,并且旋转后的图片在容器内适应宽高。
css3的transform:rotate()是以图片中心点为旋转中心的,这样的话如果是长方形的图片,旋转了90度那么它在原来的容器内显示就会变了样。超出了容器的高度或宽度。
如下图,如果仅仅是使用rotate旋转的话,就会变成这个样子。(第一张是原始状态,第二张是旋转后的状态,请问怎么解决这样的问题。我想旋转后图片仍是适应容器的)图片描述
图片描述

图片描述

阅读 7.9k
2 个回答

先说个大概思路吧,点击后,运用transform的rotate旋转,放大缩小可以调整,然后读取容器的宽高自适应就可以了。
调整transform,有2个方式,最常见的是直接操作style,第二个是写个class名,addclass。

新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题