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

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

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

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

transform-origin: 50% 180px;

哪里50%是卡片宽度的一半，180px我猜测你想要旋转点离卡片多远。（您需要根据图形的大小进行调整）

希望有帮助。

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