调整行旋转时的边界框的大小

Question

我想对我目前正在做的事情提供一些帮助。我试图用边界框旋转一个线对象。我可以旋转线没问题，但是我无法让边界框重新调整自己到旋转线。

希望这张图片可以提供帮助。

该行当前从左上角旋转。它从45度开始。当我将其旋转为90时，我得到以下结果：

是否有一个公式我可以用来调整边界框的大小，使行长度在边界框的范围内。我在数学方面并不是很出色，并且一直在研究罪恶，余弦等，但仍然无法找到一个合适的解决方案。

任何有关此的帮助将不胜感激。谢谢，

塞缪尔

Answer 1

请检查基于CSS的解决方案以解决您的问题。您可以设置 overflow：hidden 来隐藏溢出行

.boundary {
  width: 100px;
  height: 100px;
  border: 1px solid;
  overflow: hidden; //Key to hide the line which overflows the container
}

.boundary:hover .line {
  transform: rotate(360deg);
}

.line {
  width: 1px;
  height: 200%;
  background-color: blue;
  transform-origin: top;
  transform: rotate(315deg);
  transition: transform 1.2s;
  cursor: pointer;
}

<div class="boundary">
  <div class="line"></div>
</div>