CSS Atan2 Function Basic

<!DOCTYPE html>
<title>My Example</title>

.atan2-box {
    background-color: #6f42c1;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    
    /* 
      atan2(100px, -100px) equals 135deg.
      The box will rotate to face that coordinate.
    */
    transform: rotate(atan2(var(--y), var(--x)));
    transition: transform 0.5s ease;
  }
  
  .atan2-box:hover {
    /* atan2(100px, 100px) equals 45deg */
    transform: rotate(atan2(100px, 100px));
  }
</style>