使用CSS能否用圓形圖片做到球體的旋轉效果？

如果有一張圓形的圖片，用css能不能實現立體的球體旋轉效果？繞xy軸旋45度旋轉，類似地球儀，類似這種圖：

---

更新：今天其它人的回答把這個問題挖出來了，正好前段時間做了一個用dom畫3D圓球的簡單效果，也就是我下面第二段里說的，用多個片拼成一個不圓滑球形，你看到下圖中的這個比較圓滑，其實只是這些小方塊比較小而已。另外，三條彩帶是三個坐標軸

大概效果就是下圖這個樣子，在線demo：http://xieranmaya.github.io/blog/demo/css-sphere.html

電腦太卡的話看著可能也會卡，畢竟這麼多個二維面

至於我是如何做到讓這麼多小正方形在它所在有位置上正好傾斜那麼個角度的，嘿嘿，你猜我是不是人肉一個個調的？？

最後，感嘆一下數學之美吧~

=============

理論上目前css做不到這樣的效果，因為css只能實現一個「片」，所有的元素都是二維的，而這個球明顯是三維的

不過配合css的3d效果，可以大體上實現這樣的效果：用多個小正多邊形拼成一個不圓滑的「球」，就跟你在學生時代數學課上做的正20面體一樣，把多面體的面增加到一定程度看起來就像個「球」了

---

可以用光影效果（box-shadow）， 配合一張球體展開圖的position平移做到欺騙視覺的效果

---

如果你會sass和less可以試一下用動態計算的方法去處理那個圓形的圖片，但理論上是這麼說，感覺實踐起來會相當的有難度呢......另外用svg或者canvas來畫圓會好一點

---

可以去codepen上看看

---

/*其實是可以的，使用正方形的貼圖，位置即為其大小*/
@keyframes spin-ball
{
from {background-position:0px;}
to {background-position:142px;}
}

.ball-X{
position:absolute;width:100px;height:100px;border-radius:50%;
background-image:url(ball.jpg);
background-position:0px;
animation:spin-ball 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.in-ball-X{
position:absolute;width:100px;height:100px;border-radius:50%;
background-image:url(ball.jpg);
background-position:0px;
filter: blur(10px);
animation:spin-ball 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


&

&

&&&&

&

&

具體效果自己實驗，剩下的就是貼圖製作問題，就如同地圖展開之後也不是正常的形狀是吧？

本質上就是利用人類視覺上的錯覺，對於光影的變換就會產生空間認知。

---

可以假實現，效果也無法3d。截止到現在為止css在這方面還是相當的弱,並且沒有看到希望。

---

推薦閱讀：