Converting a webkit transition from CSS to JavaScript

Question

For the following HTML:

<li id="li1">
    <div id="card-container">
        <div id="card">
            <div class="front">
            <img id="track_image" src="image.jpg" />
        </div>
        <div class="back">
            <div id="controls">
                <audio controls></audio>
            </div>
        </div>  
    </div>
</li>

I have the following CSS, which will flip it on hover.

#card-container:hover .back {   
    -webkit-transform: rotateX(0deg);
}

#card-container:hover .front {      
    -webkit-transform: rotateX(-180deg);
}

But I want to change it so the flip instead happens on a click, I've attached a click listener and am trying this code below but it doesn't do anything

function click(evt, listElementId) {
       var listElement = document.getElementById(listElementId);
       var front = listElement.getElementsByClassName("front")[0];
       front.style.webkitTransition = "rotateX(-180deg)";
       var back = listElement.getElementsByClassName("back")[0];
       back.style.webkitTransition = "rotateX(0deg)"

What should the JavaScript be to achieve the same as the CSS is doing?

Community · Accepted Answer · 2017-05-23 12:13:57Z

2

You have confused transitions and transformations. According to this answer, you should use

front.style.webkitTransform = "rotateX(-180deg)";

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Sep 9, 2012 at 18:16

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ry- · Accepted Answer · 2012-09-09 18:06:16Z

0

Use a class:

#card-container.flipped .back {   
    -webkit-transform: rotateX(0deg);
}

#card-container.flipped .front {      
    -webkit-transform: rotateX(-180deg);
}

function click(evt, listElementId) {
    document.getElementById(listElementId).classList.add('flipped');
}

answered Sep 9, 2012 at 18:06

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

3 Comments

Piepants Over a year ago

Still nothing happens when I try that.

Bergi Over a year ago

@minitech: You might use .toggle() :-)

Bergi Over a year ago

@Aminoacids: How did you attach the listener? Show us the code. Also, does you UA support classList?

Collectives™ on Stack Overflow

Converting a webkit transition from CSS to JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related