奇葩需求——圖片立體旋轉
相信不少做開發的小夥伴都遇到不少的奇葩需求，在前不久就有根據手機殼顏色變換背景顏色的需求，簡直轟動一時啊，開發的小夥伴們也紛紛吐槽自己遇到過的坑爹的需求，但是又不得不絞盡腦汁解決。最近小編也遇到了一個坑爹的需求，雖然沒有根據手機殼顏色變換背景顏色這麼變態，但是也可以說是度娘上搜不到了。
Logo的立體旋轉，實際上，這個需求也不是什麼大問題，不就是立體旋轉嗎
立體旋轉
隨便弄一個css3點旋轉動畫就行了
css3點旋轉
css3點旋轉
可惜，沒過一會需求就跑過來找我了，這個效果不對，我要四面八方都能看得到的，而不是旋轉到中心就變成一條直線
一臉懵逼
就給我一張圖片，還讓我四面八方都看得到，我的天！！別人全息圖起碼也好幾十張不同角度圖片進行切換啊，你就給我一張圖片，講不講理了！！
不
程序員永遠不能說不，多大的事，搞就是了
滿臉懵逼
先構思一下先：
用兩個灰色的div和兩個圖片做成類似於立方體的東東，然後讓他旋轉起來,不不不，這不可能，這喵的是個png圖片，估計得‘漏風’
emmmm~~
怕是要來點簡單粗暴一點的了，一個圖片厚度不夠，不能立體，那多個圖片呢，把相同的logo定位在同一個位置，再通過transfrom:tanslateZ()去調節圖片的Z軸位置，嗯~~，貌似可行
OK
立體起來吧
20px應該是夠厚的了，OK，試一波
這才是立體旋轉嘛
這下總算完成任務了，各位前端大佬們有沒有更好的想法呢，也歡迎吐槽一下遇到的奇葩的需求
分享到:
閱讀更多 海碼創優 的文章
