如何使用css transform-origin 显示一圈扑克牌（矩形）？
发布于2021-08-07 08:07 阅读(1702) 评论(0) 点赞(16) 收藏(0)
有人在他们的网站上要求这样做。基本上有 12 张卡片，当您将鼠标悬停在卡片上时，会显示另一个 div，其中包含一些内容。12 张卡片需要排列成一个圆圈。我已经设法使用 CSS 旋转来完成其中的一部分 - 但我似乎无法将卡片隔开。保证金似乎不起作用，我认为这取决于transform-origin?
我已经证明这是以下 Codepen：http ://codepen.io/moy/pen/oIsLH
理想情况下，每张卡片/矩形之间和下方应该有空间。有点像“时钟”游戏。
我能想出的唯一方法是使列表项更大，然后在里面放另一个 div，这将是“卡片”。这会比创建边距的列表项的宽度窄吗？
解决方案
将变换原点放在“卡片”之外：
transform-origin: center 600px;
http://codepen.io/moob/pen/rAzdh
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/171126/0d83c8bf4d650a9ee572/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力