CSS3 transform for smartphone don't work

Question

I use the css3 method transform: rotateY(-180deg); for display the content when the curser is hover the block.

When i click on the block with my smartphone, nothing append, how can i display the content ?

My class :

#effect-2 figure .img-hover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    text-align: center;
    background-color: #e74c3c;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

HTML block :

<li>
    <figure>
        <img src="img/cocacola.png" class="front">
        <div class="img-hover">
            <h4>Cocacola</h4>
        </div>
    </figure>
</li>

Answer 1

You can add a touch event for touch devices using javascript to add you class (and trigger the animation), ie:

var myElement = //get your element

myElement.addEventListener('touchstart', function(e){
    this.className = "hover";
    setTimeout(function(){
        myElement.className = "";
    }, [animation duration]);
});

You'd set the above animation duration to match the time of your css effects (assuming they don't loop) so that it can be reused. if it does loop then you don't need to worry about it.

If you want something to work as long as the touch is active, you can trigger the removal of the class on touchend

Answer 2

Try this code:

-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Chrome, Safari, Opera */
transform:rotateY(-180deg);

Answer 3

Listen to the click event for the given element and toggle a css-class on it. Then you can specify your transformation in that class.

An example is to write your event listener inline on the element like this:

<div onclick="this.classList.toggle('transform-class')"></div>

Then later you can if you want refactor your code and bind an event listener in a separate javascript-file.