I have this "hover" selector that performs an action by having the mouse on it. But I do not know how I can cause the action to be triggered when pressed. Something similar to onClick () but in CSS
.flip:hover {
transform: perspective(500px) rotateY(-180deg) translateX(100%);
}
Try with: 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>Another valid answer is to simulate a click with a checkbox. And control in css the event checked .
I'll give you an example made in 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>Greetings.