web-dev-qa-db-fra.com

Transition CSS3 sur clic en utilisant du CSS pur

J'essaie d'obtenir une image (un symbole plus) pour une rotation de 45 degrés afin de créer un symbole en croix. Jusqu'à présent, j'ai réussi à atteindre cet objectif en utilisant le code ci-dessous, mais son travail en vol stationnaire, je voulais le faire pivoter au clic.

Existe-t-il un moyen simple de le faire en utilisant CSS ?

Mon code est:

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>

Voici la jsfiddle démo.

csscss3rotationcss-transitionstransition
34
user2498890

Si vous voulez une solution uniquement en CSS, vous pouvez utiliser active

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

Mais la transformation ne persistera pas lorsque l'activité sera déplacée. Pour cela, vous avez besoin de javascript (jquery click et css est l’OMI la plus propre).

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

violon

32
jeremyjjbrown

Méthode n ° 1: CSS _:focus_ pseudo-classe

En tant que solution CSS pure, vous pouvez obtenir une sorte d’effet en utilisant un attribut tabindex pour l’image, et _:focus_ comme pseudo-classe suit:

_<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 DE TRAVAIL.

Remarque: En utilisant cette approche, l'image est pivotée onclick (focalisé). Pour annuler la rotation, vous devez cliquer quelque part hors de l'image ( estompé).

Méthode n ° 2: Entrée masquée & _:checked_ pseudo-classe

C'est l'une de mes méthodes préférées. Dans cette approche, il existe une entrée de case à cocher masquée et un élément _<label>_ qui enveloppe l'image.

Une fois que vous avez cliqué sur l'image, l'entrée masquée est cochée en raison de l'utilisation de l'attribut for pour l'étiquette.

Par conséquent, en utilisant la pseudo-classe _:checked_ et sélecteur de fratrie adjacent ​​_+_, nous pourrions obtenir la rotation de l'image:

_<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 DE TRAVAIL # 1.

DEMO DE TRAVAIL # 2 (L'application du rotate à l'étiquette donne une meilleure expérience) .

Méthode n ° 3: Basculement d'une classe via JavaScript

Si JavaScript/jQuery est une option, vous pouvez basculer une classe _.active_ de .toggleClass() pour déclencher l'effet de rotation, comme suit:

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

DEMO DE TRAVAIL.

28
Hashem Qolami

Vous pouvez également affecter différents éléments DOM en utilisant la pseudo-classe : target . Si un élément est la destination d'une cible d'ancrage, il obtiendra le pseudo élément : target .

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

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

Voici un violon: https://jsfiddle.net/k86b81jv/

2
Dario Corno

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>
2
kaheglar

Comme le disait jeremyjjbrow, :active pseudo ne persistera pas. Mais il y a un bidouillage pour le faire en pure css. Vous pouvez l'envelopper sur un <a>tag, et appliquez le :active dessus, comme ceci:

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

Et le css:

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

Essayez-le ... Cela fonctionne (au moins sur Chrome)!

1
LcSalazar