Как сделать обратную трансформацию дочернего элемента?

Для выполнения обратной трансформации дочернего элемента в CSS, мы можем использовать свойство transform с применением оператора scale. Оператор scale позволяет изменить размер элемента по горизонтали и вертикали.

Чтобы выполнить обратную трансформацию, нужно применить оператор scale(1, 1) в CSS-правиле для дочернего элемента. Значение 1 означает, что размер элемента не изменяется.

Вот пример CSS-кода, в котором мы используем обратную трансформацию для дочернего элемента:

.parent {
  width: 200px;
  height: 200px;
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.3s ease-in-out;
}

.child:hover {
  transform: scale(2, 2);
}

.child:hover ~ .child {
  transform: scale(1, 1);
}

В этом примере у нас есть родительский элемент с классом .parent и два дочерних элемента с классом .child. При наведении курсора мыши на дочерний элемент, его размер увеличивается в два раза с помощью transform: scale(2, 2).

Однако, чтобы выполнить обратную трансформацию, мы используем соседний селектор ~ и применяем transform: scale(1, 1) для остальных дочерних элементов, когда один из них имеет примененную трансформацию.

Таким образом, при наведении на дочерний элемент, его размер увеличивается, а при убирании курсора мыши, он возвращается к исходному размеру.