【上圖就是鼠標經(jīng)過圖片180度旋轉(zhuǎn)的效果圖，這個效果挺不錯的 很多店鋪以及很多地方都會用得到它】

【一些說明】：授人以魚不如授人以漁，本來想直接分享代碼的。擔心很多同志沒有代碼基礎(chǔ)的話，就不知道怎么回事。所以米色詳細的剖析一下 這個鼠標經(jīng)過旋轉(zhuǎn)180度 到底是怎么回事。最后米色也將整理出來的  特效源碼模板 分享出來了。懶人模板，你要做的只是作圖 替換圖片。不用考慮尺寸的問題了。下面是教程開始。

第一：我們先來看看 實現(xiàn)這個效果的CSS代碼（這里為了方便查看對代碼做了精簡）

.arrow-d {

transform: rotate(180deg);      /*這里是實現(xiàn)圖片旋轉(zhuǎn)*/

transform-origin: 50% 30%;    /*這是淘寶CLASS默認附帶的原點移動樣式*/

}

上面這個就是淘寶官方的CLASS，第一個屬性是  CSS3變形 ； 第二個屬性是 原點移動。配合上圖 我們會發(fā)現(xiàn)。一般情況下  我們不對元素進行原點移動，那默認是以元素中心點進行移動的，就是圖中的紅點。

第三：上圖是米色用代碼寫的一個模擬旋轉(zhuǎn)軌跡的DOM，是以中心點進行旋轉(zhuǎn)的

第四：這里米色給DOM添加了 原點移動   transform-origin:50% 30%;   我們會發(fā)現(xiàn)  元素的原點從中心點  移動到了  上面 也就是白點位置。對原點移動以后的元素 旋轉(zhuǎn)軌跡如上圖所示。

會發(fā)現(xiàn)，從初始位置到最后的位置，其實整個過程 元素 只是上移了大概40px的距離。（背景圖每一小格高度為10px，圖片尺寸100*100）

也就是說，添加了原點移動的話，圖片旋轉(zhuǎn)時候的中心點位置就會發(fā)生偏移。這也是為什么米色分享的這個效果，其中比較麻煩的地方，需要計算偏移的距離。

第五：這個圖是給大家演示看看，原點移動能實現(xiàn)什么效果。（效果說明，鼠標經(jīng)過圖片往右縮放 二不是從中心點縮放）

[圖上網(wǎng)址已失效，請勿訪問]

通過上面的動圖，就非常直觀的看出來，淘寶店里面給圖片添加了這個效果后，圖片是如何變化的。

所以問題就來了，上面很直觀看到，圖片旋轉(zhuǎn)了180度后，圖片的位置發(fā)生了變化，如果這么直接放店鋪里面，那到時候買家看不到完整的圖片，影響用戶體驗。

那怎么才能解決這個問題呢？這里米色分別編寫了2個版本的源碼模板，供大家測試使用。源碼里面已經(jīng)寫了很詳細的文字說明。

【簡單版】：不需要計算代碼里面的寬高數(shù)值，只需要在PS里面制作一張專用尺寸的圖片即可。

【升級版】：不需要專門設(shè)計圖片了，只需要修改代碼里面一個參數(shù)即可（推薦）

很多人還是覺得，專門去設(shè)計一個尺寸的圖片太麻煩，如果無視尺寸，什么圖片都能實現(xiàn)效果，那就完美了。所以米色推薦使用升級版。

【優(yōu)勢】：

1- 你不需要去計算繁瑣的數(shù)值。用這個米色模板，你只需要   替換圖片地址 鏈接  和 圖片尺寸數(shù)值 即可。

2- 就算你不懂這個原點的運動原理，按照米色提供的尺寸計算公式  你就能隨意在店鋪實現(xiàn)這種特效了。

3-源碼中，也考慮到了，如果有需要一排放多個圖片的情況，也做了相關(guān)的說明。

4- 有很多同志還是會說，還是太麻煩了，可不可以傻瓜式操作，我只需要復(fù)制粘貼 修改簡單參數(shù)就可以直接生成特效代碼呢？ 所以米色專門將這個特效編寫開發(fā)成了一個在線生成工具，你要做的事情就是復(fù)制粘貼圖片地址和修改寬高尺寸。并且還提供了特效運動方式和時間的控制，可以做成各種各樣的炫酷效果。源碼里面提供了在線生成工具的使用地址。

【源碼下載】：已經(jīng)上傳到文章附件，直接下載即可