请问怎么实现,点击一次按钮,图片旋转90度,并且旋转后的图片在容器内适应宽高。
css3的transform:rotate()是以图片中心点为旋转中心的,这样的话如果是长方形的图片,旋转了90度那么它在原来的容器内显示就会变了样。超出了容器的高度或宽度。
如下图,如果仅仅是使用rotate旋转的话,就会变成这个样子。(第一张是原始状态,第二张是旋转后的状态,请问怎么解决这样的问题。我想旋转后图片仍是适应容器的)图片描述
请问怎么实现,点击一次按钮,图片旋转90度,并且旋转后的图片在容器内适应宽高。
css3的transform:rotate()是以图片中心点为旋转中心的,这样的话如果是长方形的图片,旋转了90度那么它在原来的容器内显示就会变了样。超出了容器的高度或宽度。
如下图,如果仅仅是使用rotate旋转的话,就会变成这个样子。(第一张是原始状态,第二张是旋转后的状态,请问怎么解决这样的问题。我想旋转后图片仍是适应容器的)图片描述
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
先说个大概思路吧,点击后,运用transform的rotate旋转,放大缩小可以调整,然后读取容器的宽高自适应就可以了。
调整transform,有2个方式,最常见的是直接操作style,第二个是写个class名,addclass。