1

Tengo este selector "hover" que realiza una accion al tener el raton encima. Pero no se como puedo hacer que la accion se desencadene al ser pulsado. Algo similar como al onClick() pero en CSS

.flip:hover {
    transform: perspective(500px) rotateY(-180deg) translateX(100%);
}
1
  • ¿A qué tipo de elemento quieres que afecte ese click?
    – Alvaro Montoro
    el 20 nov. 2017 a las 15:57

2 respuestas 2

4

Prueba con :active

.flip:active { transform: perspective(500px) rotateY(-180deg) translateX(100%); }

a:active {
    background-color: yellow;
}
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :active selector styles the active link.</p>

0

Otra respuesta también valida es simular un click con un checkbox. Y controlar en css el evento checked.

Te dejo un ejemplo realizado en codepen.

body {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flip {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
}
.flip .flip-body {
  -webkit-transition: all .3s;
  transition: all .3s;
  background: green;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
  position: absolute;
}

#btnControl {
  display: none;
}
#btnControl:checked + label {
  -webkit-transform: perspective(500px) rotateY(-180deg);
          transform: perspective(500px) rotateY(-180deg);
}
<div class="flip">
  <input type="checkbox" id="btnControl"/>
  <label class="flip-body" for="btnControl">click</label>
  Soy el interior del div
</div>

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.