CSS3-Übergang bei Klick mit reinem CSS

Ich versuche ein Bild (plus-symbol) drehen um 45 Grad zu schaffen, ein Kreuz-symbol. Ich habe es bisher geschafft dies zu erreichen, verwenden Sie den code unten, aber seine arbeiten schweben, ich wollte es haben, drehen Sie auf klicken Sie auf.

Gibt es eine einfache Möglichkeit, dies zu tun mit CSS?

Mein code ist:

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>

Hier ist die jsfiddle demo.

InformationsquelleAutor der Frage user2498890 | 2014-02-20

  1. 29

    Wenn Sie möchten, eine css Lösung, die Sie verwenden können, aktiv 

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

    Aber die transformation wird nicht beibehalten, wenn die Aktivität bewegt. Dafür brauchst du javascript (jquery klicken Sie auf und css ist die sauberste IMO).

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

    Fiddle

    InformationsquelleAutor der Antwort jeremyjjbrown

  2. 26

    Methode #1: CSS - :focus pseudo-Klasse

    Als Reine CSS-Lösung, die Sie erzielen könnte Art der Wirkung durch die Verwendung eines tabindex - Attribut für das Bild, und :focus pseudo-Klasse wie folgt:

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

    ARBEITEN DEMO.

    Hinweis: Mit diesem Ansatz, wird das Bild gedreht wird, onclick (fokussiert), zu negieren, die rotation, müssen Sie klicken Sie irgendwo außerhalb des Bildes (blured).

    Methode #2: Hidden input & :checked pseudo-Klasse

    Dies ist einer meiner Lieblings-Methoden. In diesem Ansatz gibt es eine versteckte checkbox-input-und ein <label> element umschließt das Bild.

    Sobald man auf das Bild klickt, wird die verdeckte Eingabe aktiviert ist, weil der mit for - Attribut für das label.

    Daher durch die Verwendung der aktiviert pseudo-Klasse und adjacent sibling selector + haben, könnten wir das Bild gedreht werden soll:

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

    ARBEITEN DEMO #1.

    ARBEITEN DEMO #2 (Anwendung der rotate auf das label bietet eine bessere Erfahrung).

    Methode #3: Wechsel einer Klasse per JavaScript

    Wenn mit JavaScript/jQuery ist eine option, man könnte Umschalten, ein .active Klasse von .toggleClass() zum auslösen der Drehung Wirkung, wie folgt:

    $('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
});
    .crossRotate.active {
    /* vendor-prefixes here... */
    transform: rotate(45deg);
}

    ARBEITEN DEMO.

    InformationsquelleAutor der Antwort Hashem Qolami

  3. 2

    Können Sie auch beeinflussen differente DOM-Elemente mit :Ziel pseudo-Klasse.
    Wenn ein element ist die Bestimmung einer Ziel-Anker wird es die :Ziel pseudo-element.

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

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

    Hier ist ein Turnschuh : https://jsfiddle.net/k86b81jv/

    InformationsquelleAutor der Antwort Dario Corno

  4. 1

    Als jeremyjjbrow sagte :active pseudo nicht bestehen. Aber es gibt einen hack dafür auf Reine css-Dateien. Sie können wickeln Sie es auf einen <a> tag, und wenden Sie die :active auf, wie diese:

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

    Und css:

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

    Probieren Sie es aus... Es funktioniert (zumindest bei Chrome)!

    InformationsquelleAutor der Antwort LcSalazar

  5. -1

    Können Sie JavaScript verwenden, um dies zu tun, mit onClick-Methode.
    Vielleicht hilft CSS3 transition click-Ereignis

    InformationsquelleAutor der Antwort Lucas Haas

Schreibe einen Kommentar