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

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

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

就您而言，您想要这样的东西:

transform-origin: 50% 180px;

其中 50% 位于卡片宽度的一半，180px 是我的猜测，即您希望旋转距离卡片多远观点。 (您需要根据图形的大小进行调整)

希望有帮助。

ps - 另请注意:-webkit-transform 本身仅适用于 Chrome 和 Safari。您还应该指定 -moz-transform、-ms-transform 和 transform 以便定位所有浏览器。 (无论如何，他们中的很多人实际上根本不需要前缀)