animation Flip div when clicked

I am trying to make the divs flip whenever I click on them. I'm not sure why it doesn't work. Please help.

Here is the demo of this code. http://langbook.co/testicles-1-2-flashcards/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
  <div id="back">Box - Back</div>
  <div id="front">Box - Front </div>
</div>
</body>
</html>

Answers


First, I would move your JS to the end of the page.

It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so:

var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));

To flip back, you could just keep the object's state in an attribute to know which side it's on. Also note that flip(vlib) will be called immediately; to wait for the click event, you'll need to pass a reference to the function:

vlib.addEventListener('click', flip);

Seems to work: JSFiddle


http://www.w3schools.com/css/css3_2dtransforms.asp

http://www.w3schools.com/css/css3_3dtransforms.asp

Not sure if you have tried this but this my solve your problem. Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve).

Hope this helps.


ex: http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility

easy one CSS line :

animation:mymove 3s infinite;

where mymove is:

@keyframes mymove
    {
    from {transform:rotateY(0deg);}
    to {transform:rotateY(360deg);}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    from {-moz-transform:rotateY(0deg);}
    to {-moz-transform:rotateY(360deg);}
    }

    @-webkit-keyframes mymove /* Opera, Safari, Chrome */
    {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
    }

    @-ms-keyframes mymove /* Internet Explorer */
    {
    from {-ms-transform:rotateY(0deg);}
    to {-ms-transform:rotateY(360deg);}
    }

example:

div#myDIV
    {
    animation:mymove 3s infinite;/* <== HERE */
    /* Firefox */
    -moz-animation:mymove 3s infinite;
    -moz-animation-timing-function:linear;
    /* Opera, Safari, Chrome */
    -webkit-animation:mymove 3s infinite;
    -webkit-animation-timing-function:linear;
    }

You had a few mistakes with syntax and declarations in the JS part.

Hope this is what you are looking for:

https://jsfiddle.net/xrtvhvgf/2/

function flip(){
    if(vlib_front.style.transform){
        el.children[1].style.transform = "";
        el.children[0].style.transform = "";
    } else {
        el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
        el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
    }
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');

el.addEventListener('click', flip);

Need Your Help

Get real offset left/top of element with inline offsetparent

jquery html css dom offset

I'm trying to get the coordinates of an element on a page. I've been using the standard way to obtain it:

Programmatically convert a video to FLV

java video flv opencms transcode

i am currently working on a web application that needs to accept video uploaded by users in any format (.avi, .mov, etc.) and convert them to flv for playing in a flash-based player.