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

Question

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

我已经证明这是以下Codepen：http://codepen.io/moy/pen/oIsLH

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

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

Answer 1

将＆＃39;卡的转换来源放在之外：

transform-origin: center 600px;

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