CSS event when clicking on container

Question

CSS event when clicking on container

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (1 votes)

0

I have an image and I am trying to click on it to give me a flip effect that I have already done and to return the image to me. The point is that I have handled it with over and active. But one does it to me when I have the mouse on top of the image and the other when I click on the image, and I have to have the mouse pressed on the image while doing the whole transition.

My idea is that when I click on an image of a letter I return to the letter and it shows. And when I press it again it returns to its origin state. and I do not know if I can deal with this via css.

link

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

flip is the class that has the containers of the letters in the image

Is there any css property like the onclick?

javascript html css

asked by Eduardo 21.11.2017 в 17:35

source

3 answers

5

You do not necessarily need JavaScript to do what you need in your question, you can do it with CSS in the following way:

input[type="checkbox"]{
    display: none;
}

input[type="checkbox"]:checked + label img{
    transform: perspective(500px) rotateY(-180deg) translateX(100%);
}

<input type="checkbox" name="imagen" id="imagen">
<label for="imagen">
    <img src="https://i.imgur.com/TRGwus4.png" alt="Imagen" id="img">
</label>

It's a little trick you could use in case you do not want to use JavaScript or its libraries.

answered by 21.11.2017 в 17:58

1

See if this library works for you, link

Greetings.

answered by 22.11.2017 в 08:44

Get Name of an input in php Can you make method calls by clicking on a button in HTML5?

score 3 · Accepted Answer

You can add a class to the element by clicking on it.

There are different ways of doing it. Using jQuery you could use, for example, the toggleClass method so that the first click would add the class and the next delete it by returning the element to its original state:

$(function(){
  $('.card').click(function(){ $(this).toggleClass('flip'); });
});

.card{
  width: 100px;
  height: 200px;
  border: solid 1px black;
  left: 100px;
  position: relative;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">carta a rotar</div>