如何使用 css transform-origin 显示一圈扑克牌（矩形）？答案

【问题标题】：How to use css transform-origin to show a circle of playing cards (rectangles)?如何使用 css transform-origin 显示一圈扑克牌（矩形）？
【发布时间】：2014-11-03 10:46:45
【问题描述】：

有人为他们的网站请求了这个。基本上有 12 张卡片，当您将鼠标悬停在卡片上时，会显示另一个 div，其中包含一些内容。 12张卡片需要排成一圈。我已经设法使用 CSS 旋转来完成其中的一部分 - 但我似乎无法将卡片隔开。保证金似乎不起作用，我认为这取决于transform-origin?

我已经展示了以下 Codepen：http://codepen.io/moy/pen/oIsLH

理想情况下，每张卡片/矩形之间和下方应该有空格。有点像“时钟”游戏。

我能想出的唯一方法是使列表项更大，然后在其中放置另一个 div，这将是“卡片”。这会比创建边距的列表项的宽度窄吗？

【问题讨论】：

将图片添加到q和a并添加标签，使标题对其他人更有用。

标签： html css transform css-transforms

【解决方案1】：

将变换原点放在“卡片”之外：

transform-origin: center 600px;

http://codepen.io/moob/pen/rAzdh

【讨论】：

噢！从来没有想过使用像素值，我很傻。非常感谢您解决这个问题！ :)