html - 使用 CSS 创建形状后，如何将其中心用作另一个 CSS 形状的焦点？

Question

我想创建一个圆和一个正方形。我希望正方形的焦点成为圆圈的焦点。这样，当我使形状变大或变小时，它的位置仍然在我想要的位置。如何做到这一点？

基本上作为一种学习工具，下图是我想仅使用 html 和 css 重新创建的内容。但是对于我的问题，请只关注外圈和外方。

Answer 1

您可以混合使用 translate 和 transform-origin。

基本上将您的元素置于容器的中心:

  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);

如果正方形旋转 45 度则不会居中，您可以通过以下方式更改原点:

  transform-origin: 85% -35%;

你在这个中有一个例子JSFIDDLE (将鼠标悬停在元素上以检查它们是否收缩和扩展