Revision history [back]

One way to prevent the border of a CSS line from disappearing during a rotation animation is to use the "backface-visibility" property. Set it to "visible" on the element being rotated, and the border will remain visible on both sides of the element during the animation. Here's an example:

.box {
  border: 2px solid black;
  backface-visibility: visible;
  transition: transform 1s;
}

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

In this example, the "box" element has a border of 2px solid black and the "backface-visibility" property is set to "visible". When the element is hovered over, it rotates 360 degrees over a period of 1 second. Because the backface is visible, the border stays in view during the entire animation, regardless of the angle of rotation.