css / javascript围绕弧旋转图像

Question

有没有办法围绕圆弧旋转图像，如下图所示。

我试过了：

<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>

提前致谢。

Answer 1

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

答案的另一半是改变旋转点。这也可以使用transform-origin样式在CSS中轻松完成。

在你的情况下，你想要这样的东西：

transform-origin: 50% 180px;

50%位于卡片宽度的中间位置，180px是我猜测距离卡片有多远，你想要旋转点。 （您需要根据图形的大小进行调整）

希望有所帮助。

ps - 另请注意：-webkit-transform本身只适用于Chrome和Safari。您还应指定-moz-transform，-ms-transform和transform以定位所有浏览器。 （尽管如此，他们中的很多人实际上根本不需要前缀）