css實(shí)現(xiàn)圖片旋轉(zhuǎn)功能
發(fā)布時(shí)間：2025-02-07 16:20:53 作者：大得369 
我要評(píng)論
我要評(píng)論文章介紹了四種CSS變換效果：圖片旋轉(zhuǎn)90度、水平翻轉(zhuǎn)、垂直翻轉(zhuǎn),并附帶了相應(yīng)的代碼示例，代碼簡(jiǎn)單易懂，感興趣的朋友跟隨小編一起看看吧
一 css實(shí)現(xiàn)圖片旋轉(zhuǎn)90度
.icon{
? -moz-transform:rotate(-90deg);
? -webkit-transform:rotate(-90deg);
}二 水平翻轉(zhuǎn)
.icon {
? ? color: #f64e78;
? ? font-size: 20px;
? ? display: inline-block;
? ? -moz-transform:scaleX(-1);
? ? -webkit-transform:scaleX(-1);
? ? -o-transform:scaleX(-1);
? ? transform:scaleX(-1);
}三 垂直翻轉(zhuǎn)
.icon {
? ? color: #f64e78;
? ? font-size: 20px;
? ? display: inline-block;
? ? -moz-transform:scaleY(-1);
? ? -webkit-transform:scaleY(-1);
? ? -o-transform:scaleY(-1);
? ? transform:scaleY(-1)
}四 效果圖
到此這篇關(guān)于css實(shí)現(xiàn)圖片旋轉(zhuǎn)功能的文章就介紹到這了,更多相關(guān)css圖片旋轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了CSS中圖片旋轉(zhuǎn)超出父元素解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2023-09-06
CSS實(shí)現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果,需要的朋友可以參考下2017-06-17
使用純CSS實(shí)現(xiàn)3D旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了使用純CSS實(shí)現(xiàn)3D旋轉(zhuǎn)效果的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-01-03
CSS動(dòng)態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果(實(shí)例代碼)
這篇文章主要介紹了CSS動(dòng)態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-18css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果
本文通過(guò)實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-09CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕批量生產(chǎn)
這篇文章主要介紹了CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕批量生產(chǎn)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-18
css制作收縮圓環(huán)旋轉(zhuǎn)效果實(shí)例代碼
這篇文章主要介紹了css制作收縮圓環(huán)旋轉(zhuǎn)效果實(shí)例代碼,需要的朋友可以參考下2018-02-26利用CSS實(shí)現(xiàn)立方體360度旋轉(zhuǎn)效果實(shí)例代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了利用CSS實(shí)現(xiàn)立方體360度旋轉(zhuǎn)效果的方法，實(shí)現(xiàn)后的效果非常炫酷，而且實(shí)現(xiàn)的代碼非常簡(jiǎn)單，對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下2016-10-18關(guān)于css旋轉(zhuǎn)動(dòng)畫效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇關(guān)于css旋轉(zhuǎn)動(dòng)畫效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-19
