CSS3 Преобразование по клику с использованием чистого CSS

Чтобы улучшить взаимодействие с пользователем, вы можете столкнуться с необходимостью трансформировать элемент при клике с помощью CSS3. В частности, поворот изображения для создания символа креста является распространенной задачей. Хотя наведение курсора является распространенным триггером трансформации, в этой статье рассматривается возможность использования события onClick исключительно через CSS.

Изначально предоставленный код использует событие наведения для поворота изображения на 45 градусов. Однако для запуска преобразования при щелчке требуется модификация.

Преобразование активного состояния

CSS предлагает псевдокласс :active, который предназначен для стилизации элементов при щелчке по ним. Используя этот псевдокласс, вы можете добиться желаемого поведения:

.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

Этот код повернет изображение на 45 градусов при нажатии на него. Однако важно отметить, что преобразование исчезнет после отпускания щелчка. Это связано с тем, что состояние :active активно только во время самого щелчка.

Сохранение преобразования с помощью JavaScript

Если вы хотите, чтобы преобразование сохранялось после щелчка, вам необходимо использовать JavaScript. Захватив событие щелчка с помощью jQuery, вы можете переключить преобразование с помощью метода css():

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});

В этом коде проверяется свойство преобразования. Если для него установлено значение «Нет», преобразование применяется, в противном случае оно удаляется. Это позволяет включать и выключать крестик при каждом щелчке мыши.

Используя эти методы, вы можете эффективно поворачивать изображение с помощью преобразования CSS3 при щелчке, как с использованием JavaScript, так и без него, чтобы сохранить преобразование после щелчка. событие.