在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ js控制圖片旋轉(zhuǎn)(點(diǎn)擊一下按鈕就旋轉(zhuǎn)90度)的問(wèn)題

js控制圖片旋轉(zhuǎn)(點(diǎn)擊一下按鈕就旋轉(zhuǎn)90度)的問(wèn)題

請(qǐng)問(wèn)怎么實(shí)現(xiàn),點(diǎn)擊一次按鈕,圖片旋轉(zhuǎn)90度,并且旋轉(zhuǎn)后的圖片在容器內(nèi)適應(yīng)寬高。
css3的transform:rotate()是以圖片中心點(diǎn)為旋轉(zhuǎn)中心的,這樣的話如果是長(zhǎng)方形的圖片,旋轉(zhuǎn)了90度那么它在原來(lái)的容器內(nèi)顯示就會(huì)變了樣。超出了容器的高度或?qū)挾取?br> 如下圖,如果僅僅是使用rotate旋轉(zhuǎn)的話,就會(huì)變成這個(gè)樣子。(第一張是原始狀態(tài),第二張是旋轉(zhuǎn)后的狀態(tài),請(qǐng)問(wèn)怎么解決這樣的問(wèn)題。我想旋轉(zhuǎn)后圖片仍是適應(yīng)容器的)圖片描述
圖片描述

圖片描述

回答
編輯回答
離人歸

先說(shuō)個(gè)大概思路吧,點(diǎn)擊后,運(yùn)用transform的rotate旋轉(zhuǎn),放大縮小可以調(diào)整,然后讀取容器的寬高自適應(yīng)就可以了。
調(diào)整transform,有2個(gè)方式,最常見(jiàn)的是直接操作style,第二個(gè)是寫個(gè)class名,addclass。

2017年7月12日 11:24