S CSS добавить анимацию на основе идентификатора

Question

Я включаю класс выполнения для анимации. Два DIV с разными идентификаторами [front, back] имеют одинаковые классы [flip], добавленные при клике. Могу ли я добавить другую анимацию на основе Id

JSX:

<div className="card">
       <div id="front" className={frontClasses.join(' ')} 
 onClick={clickedFront}>
          OPEN
        </div>
  <div id="back" className={backClasses.join(' ')} >
          {props.inputNum}
  </div>

В S CSS

Это работает

   .flip {
          transform:rotateY(180deg);        
     }

и не работает

   .flip {
      #front {
          transform:rotateY(180deg);
        }
       #back {
          transform:rotateY(0deg);
        }
   }

Я хочу вращать div только с id front

Answer 1

Вам не хватает & для вложенности S CSS &#front

Вы можете просто использовать #front.flip, хотя.

.flip {
  background-color: red;
  height: 200px;
  width: 200px;
}

#front.flip {
  background-color: green;
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
}

<div class="flip"></div>
<div class="flip" id="front"></div>