html - 如何使用 css transform-origin 显示一圈扑克牌(矩形)？

Question

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

我已经展示了这是以下代码笔:http://codepen.io/moy/pen/oIsLH

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

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

Answer 1

将变换原点放在“卡片”的外面:

transform-origin: center 600px;

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