我想创建一个圆和一个正方形。我希望正方形的焦点成为圆圈的焦点。这样，当我使形状变大或变小时，它的位置仍然在我想要的位置。如何做到这一点？
基本上作为一种学习工具，下图是我想仅使用 html 和 css 重新创建的内容。但是对于我的问题，请只关注外圈和外方。
最佳答案
您可以混合使用 translate 和 transform-origin。
基本上将您的元素置于容器的中心:
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
如果正方形旋转 45 度则不会居中，您可以通过以下方式更改原点:
transform-origin: 85% -35%;
你在这个中有一个例子JSFIDDLE (将鼠标悬停在元素上以检查它们是否收缩和扩展
关于html - 使用 CSS 创建形状后，如何将其中心用作另一个 CSS 形状的焦点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34035275/