transicion - transition css hover
Transición de CSS3 al hacer clic usando CSS puro (5)
Estoy tratando de obtener una imagen (un símbolo más) para rotar 45 grados para crear un símbolo de cruz. Hasta ahora he logrado lograr esto usando el siguiente código pero está trabajando en el vuelo estacionario, quería que gire al hacer clic.
¿Hay una manera simple de hacerlo usando CSS ?
Mi código es:
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>
Aquí está la demostración jsfiddle .
Método n. ° 1: CSS :focus pseudoclase
Como solución de CSS puro, puede lograr el tipo de efecto utilizando un atributo tabindex para la imagen y tabindex tabindex de la siguiente manera:
<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);
}
Nota: Al usar este enfoque, la imagen se gira haciendo clic (enfocado), para anular la rotación, deberá hacer clic en algún lugar fuera de la imagen (borroneada).
Método n. ° 2: Entrada oculta & :checked pseudoclase :checked
Este es uno de mis métodos favoritos. En este enfoque, hay una entrada de casilla oculta y un elemento <label> que envuelve la imagen.
Una vez que hace clic en la imagen, la entrada oculta se marca porque se usa for atributo de la etiqueta.
Por lo tanto, utilizando la pseudo-clase :checked y el selector de hermanos adyacentes + , podríamos hacer rotar la imagen:
<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 TRABAJO # 2 (Aplicar la rotate a la etiqueta brinda una mejor experiencia) .
Método n. ° 3: alternar una clase a través de JavaScript
Si usa JavaScript / jQuery es una opción, puede alternar una clase .toggleClass() por .toggleClass() para activar el efecto de rotación, de la siguiente manera:
$(''.crossRotate'').on(''click'', function(){
$(this).toggleClass(''active'');
});
.crossRotate.active {
/* vendor-prefixes here... */
transform: rotate(45deg);
}
Como dijo jeremyjjbrow,: el pseudo :active no persistirá. Pero hay un truco para hacerlo en CSS puro. Puede envolverlo en una etiqueta <a> y aplicar el :active en él, así:
<a class="test">
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</a>
Y el CSS:
.test:active .crossRotate {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
Pruébalo ... ¡Funciona (al menos en Chrome)!
Puede usar JavaScript para hacer esto, con el método onClick. Esto quizás ayude al evento click de transición de CSS3
Si quieres una solución de solo CSS, puedes usar active
.crossRotate:active {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
Pero la transformación no persistirá cuando la actividad se mueva. Para eso necesitas javascript (jquery click y css es la OMI más limpia).
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == ''none'' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
También puede afectar diferentes elementos DOM utilizando : pseudo clase objetivo . Si un elemento es el destino de un objetivo de anclaje obtendrá el pseudo elemento de destino .
<style>
p { color:black; }
p:target { color:red; }
</style>
<a href="#elem">Click me</a>
<p id="elem">And I will change</p>
Aquí hay un violín: https://jsfiddle.net/k86b81jv/