Przejście CSS3 po kliknięciu za pomocą czystego CSS

Staram się, aby obraz (symbol plus) obrócił się o 45 stopni, aby utworzyć symbol krzyża. Do tej pory udało mi się to osiągnąć za pomocą poniższego kodu, ale jego praca na hover, chciałem mieć go obrócić na kliknięcie.

Czy jest na to prosty sposób używając CSS?

Mój kod to:

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>

Oto jsfiddle demo.

Author: Hashem Qolami, 2014-02-20
Source

6 answers

Jeśli chcesz mieć tylko rozwiązanie css możesz użyć active 

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

Ale transformacja nie będzie trwała, gdy aktywność się przesunie. Do tego potrzebujesz javascript (jQuery click i css jest najczystszym IMO).

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

Fiddle

 36
Author: jeremyjjbrown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-20 21:39:30

Metoda #1: CSS :focus pseudo-Klasa

Jako czyste rozwiązanie CSS, można osiągnąć rodzaj efektu za pomocą tabindex atrybut dla obrazu, oraz :focus pseudo-klasa w następujący sposób: 

<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);
}

DEMO ROBOCZE.

Uwaga: używając tego podejścia, obraz zostanie obrócony onclick (focused), aby zanegować obrót, musisz kliknąć gdzieś poza obrazem (rozmazany).

Metoda # 2: ukryte wejście & :checked pseudo-Klasa

To jedna z moich ulubionych metod. W tym podejściu znajduje się ukryte pole wyboru i element <label>, który zawija obraz.

Po kliknięciu na obrazek, ukryte wejście jest sprawdzane przez użycie atrybutu for dla etykiety.

Stąd za pomocą :checked pseudo-klasa i sąsiadujący selektor rodzeństwa +, możemy sprawić, że obraz zostanie obrócony: 

<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);
}

DEMO ROBOCZE #1.

Demo robocze #2 (zastosowanie {[14] } na etykiecie daje lepsze wrażenia) .

Metoda #3: przełączanie klasy przez JavaScript

Jeśli użycie JavaScript / jQuery jest opcją, możesz przełączyć klasę .active przez .toggleClass() aby wywołać efekt rotacji, w następujący sposób: 

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

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

DEMO ROBOCZE.

 32
Author: Hashem Qolami,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-21 15:54:33

Voila!

div {
  background-color: red;
  color: white;
  font-weight: bold;
  width: 48px;
  height: 48px;  
  transform: rotate(360deg);
  transition: transform 0.5s;
}

div:active {
  transform: rotate(0deg);
  transition:  0s;
}
<div></div>
 10
Author: kaheglar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-08 16:23:46

Możesz również wpływać na różne elementy DOM używając pseudo klasy : target. Jeśli element jest celem docelowym kotwicy, otrzyma pseudo element :target.

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

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

Oto skrzypce: https://jsfiddle.net/k86b81jv/

 2
Author: Dario Corno,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-31 11:23:15

Jak powiedział jeremyjjbrow, :active pseudo nie będzie trwać. Ale jest hack do robienia tego na czystym css. Możesz go zawinąć na znaczniku <a> i zastosować :active na nim, w następujący sposób: 

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

I css: 

.test:active .crossRotate {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    }
Spróbuj... Działa (przynajmniej na Chrome)!
 1
Author: LcSalazar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-20 20:54:44

Możesz użyć JavaScript, aby to zrobić, za pomocą metody onClick. To może pomóc CSS3 transition click event

 -1
Author: Lucas Haas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:23