CSS Sign Function Basic

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

.sign-box {
    background-color: #ffc107;
    color: #000;
    font-weight: bold;
    font-size: 1.5em;
    height: 60px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    
    /* 
      We use sign() to determine the scaleX multiplier.
      If --val is positive, scaleX(1) -> faces right.
      If --val is negative, scaleX(-1) -> faces left (flipped).
    */
    transform: scaleX(sign(var(--val)));
  }

/* Positive value: sign() returns 1 */
  .box-positive { 
    --val: 45px; 
  }

/* Negative value: sign() returns -1 */
  .box-negative { 
    --val: -120px; 
    background-color: #17a2b8;
    color: white;
  }
</style>