調整線旋轉時邊框的大小

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>