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

Я пытаюсь получить изображение (символ плюса), чтобы повернуть 45 градусов, чтобы создать крестик. Мне до сих пор удалось добиться этого, используя код ниже, но его работа над зависанием, я хотел, чтобы он вращался по щелчку.

Есть ли простой способ сделать это с помощью CSS?

Мой код:

CSS

img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

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

HTML

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>

Вот демон jsfiddle.

Ответы

Ответ 1

Если вы хотите использовать только css-решение, вы можете использовать active

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

Но преобразование не будет сохраняться при движении активности. Для этого вам нужен javascript (jquery click и css - самая чистая IMO).

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

Fiddle

Ответ 2

Метод # 1: CSS :focus псевдокласс

Как чистое решение CSS, вы можете добиться своего эффекта, используя атрибут tabindex для изображения, а :focus псевдокласс следующим образом:

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

.crossRotate {
    outline: 0;
    /* other styles... */
}

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

РАБОЧИЙ ДЕМО.

Примечание.. Используя этот подход, изображение поворачивается по щелчку (сфокусировано), чтобы отрицать поворот, вам нужно щелкнуть где-нибудь изображение (размыто).

Метод # 2: Скрытый ввод и :checked псевдокласс

Это один из моих любимых методов. В этом подходе есть скрытый флажок и элемент <label>, который обертывает изображение.

Как только вы нажмете на изображение, скрытый ввод будет проверен из-за использования атрибута for для метки.

Следовательно, используя псевдо-класс :checked и соседний селектор для сиблинга +, мы может заставить изображение поворачиваться:

<input type="checkbox" id="hacky-input">

<label for="hacky-input">
  <img class="crossRotate" src="http://placehold.it/100">
</label>

#hacky-input {
  display: none; /* Hide the input */
}

#hacky-input:checked + label img.crossRotate {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

РАБОЧИЙ ДЕМО № 1.

РАБОЧИЙ ДЕМО №2 (Применять rotate к ярлыку дает лучший опыт).

Метод №3: Переключение класса с помощью JavaScript

Если использование JavaScript/jQuery является опцией, вы можете переключить класс .active на .toggleClass(), чтобы вызвать эффект вращения, как показано ниже:

$('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
});

.crossRotate.active {
    /* vendor-prefixes here... */
    transform: rotate(45deg);
}

РАБОЧИЙ ДЕМО.

Ответ 3

Вы также можете влиять на различные элементы DOM с помощью псевдо-класса : target. Если элемент является местом назначения якорной цели, он получит псевдо-элемент : target.

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>

Вот скрипка: https://jsfiddle.net/k86b81jv/

Ответ 4

Как сказал jeremyjjbrow, :active pseudo не будет сохраняться. Но там есть взломать это на чистом css. Вы можете обернуть его тегом <a> и применить к нему :active, например:

<a class="test">
    <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
 </a>

И css:

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

Попробуйте... Он работает (по крайней мере, в Chrome)!