Transferring Hover effects to Tap for Mobile

Question

I know this topic has been covered before on this site, and I tried to implement the jQuery from this question before coming here, and it worked in some instances but not all. In fact, it worked on mobile, but made it stop working on desktop. So i changes everything back to how it was in order to get some accurate help.

I am trying to convert a major hover effect on the desktop to be a tap effect on touchscreen devices. I am not super skilled with javascript yet, so i am trying to find the easiest way to go about it. My effect is a css animation that acts upon hover. Here is my site and here is my css code for the animation right now.

Thanks so much for any help.

.letter {
transition: -webkit-transform 500ms ease-in-out;
transition: -moz-transform 500ms ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;  

}

.letter div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;

}

.side-b {   
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);

}

#letter_wrap {
-webkit-perspective:1000px; 
-moz-perspective:1000px;

}

#letter_wrap:hover div.letter {
-webkit-transform: rotateY(-.5turn);
-moz-transform: rotateY(-.5turn);

}

/--Transition Delays--/

#letter_i , #letter_v , #letter_o2{
transition-delay: .1s ;
-moz-transition-delay: .1s ;
-webkit-transition-delay: .1s ;

}

#letter_space , #letter_e , #letter_o{
transition-delay: .2s ;
-moz-transition-delay: .2s ;
-webkit-transition-delay: .2s ;

}

#letter_l , #letter_y {
transition-delay: .3s ;
-moz-transition-delay: .3s ;
-webkit-transition-delay: .3s ;

}