css/javascript圍繞圓弧旋轉圖像

是否有任何方法圍繞圓弧旋轉圖像，如下圖所示。css/javascript圍繞圓弧旋轉圖像

我想：

<div id="me_tv_cards"> 
          <img src="cards/clubs_6.png" style="-webkit-transform:rotate(-40deg);"> 
          <img src="cards/clubs_4.png" style="-webkit-transform:rotate(-35deg);"> 
          <img src="cards/clubs_8.png" style="-webkit-transform:rotate(-30deg);"> 
          <img src="cards/clubs_9.png" style="-webkit-transform: rotate(0deg);"> 
          <img src="cards/clubs_10.png" style="-webkit-transform: rotate(10deg);"> 
          <img src="cards/clubs_6.png" style="-webkit-transform: rotate(21deg);"> 
          <img src="cards/clubs_6.png" style="-webkit-transform: rotate(27deg);"> 
          <img src="cards/clubs_6.png" style="-webkit-transform: rotate(40deg);"> 
         </div>

在此先感謝。 enter image description here

來源

2013-05-31 Shahid Karimi

使用CSS transform:rotate(-40deg);只是答案的一半。

答案的另一半是改變旋轉點。這也可以通過使用transform-origin樣式的CSS輕鬆完成。

在你的情況，你想是這樣的：

transform-origin: 50% 180px;

凡50%是在卡內的寬度中途，和180px是我的猜測，多遠向下遠離卡，你想要旋轉點。（您需要根據圖形大小進行調整）

希望有所幫助。

ps - 也請注意：-webkit-transform本身只能在Chrome和Safari中使用。您還應指定-moz-transform,-ms-transform和transform以便定位所有瀏覽器。（儘管如此，它們中的很多實際上並不需要前綴）

來源

2013-05-31 12:31:29 Spudley

我沒有瀏覽器限制。這是建設只鉻鉻 –

@薩拉 - 不過，你仍然應該小心使用'webkit'前綴，而不指定等效的非前綴樣式; Chrome可能會在接下來的幾個版本中放棄對所有'webkit'前綴的支持。另外，爲單一瀏覽器設計是一個壞主意 - 這就是IE6今天如此大的問題的確切原因;人們爲IE6編寫網站，並說「我不需要支持任何其他瀏覽器」......現在看看造成的問題，並問問自己，你是否想在五年內再次成爲同樣問題的原因時間。 – Spudley

css/javascript圍繞圓弧旋轉圖像

回答

相關問題