Forums
Home Product Q&A Discussion groups Articles Ask a question Search
Learning
Events
Champions

Forums

Articles
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

how to flip a div using jquery and css?

anurag kumar3
anurag kumar July 19, 2013

<html>
<style>
.panel
{
height:300px;
width:280px;
margin-left:850px;
margin-top:150px;
position:absolute;
-webkit-perspective:600px;
-moz-perspective:600px;
}
.panel .front
{
top:0;
z-index:900;
height:inherit;
width:inherit;
position:absolute;
text-align:center;
-webkit-transform:rotateX(0deg) rotateY(0deg);
-webkit-transform-style:preserve -3d;
-webkit-backface-visibility:hidden;
-moz-transform:rotateX(0deg) rotateY(0deg);
-moz-transform-style:preserve -3d;
-moz-backface-visibility:hidden;
-o-transition: all.4s ease-in-out;
-ms-transition: all.4s ease-in-out;
-moz-transition: all.4s ease-in-out;
-webkit-transition: all.4s ease-in-out;
transition: all.4s ease-in-out;
}
.panel.flip .front
{
z-index:900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);

}
.panel .back
{
top:0;
z-index:800;
height:inherit;
width:inherit;
position:absolute;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style:preserve -3d;
-webkit-backface-visibility:hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style:preserve -3d;
-moz-backface-visibility:hidden;
-o-transition: all.4s ease-in-out;
-ms-transition: all.4s ease-in-out;
-moz-transition: all.4s ease-in-out;
-webkit-transition: all.4s ease-in-out;
transition: all.4s ease-in-out;
}
.panel.flip .back
{
z-index:1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);

}
.pad1
{
height:300px;
width:280px;
background-color:yellow;
}
.pad2
{
height:300px;
width:280px;
background-color:yellow;
}
</style>
<script type="text/javascript">
var i=0;
if(i==0)
{
$(document).ready(function(){
$("#trail").click(function(){
$('.panel').addClass('flip'); i++;

});
});
}
if(i==1)
{
$(document).ready(function(){
$("#trail").click(function(){
$('.panel').removeClass('flip'); i--;

});
});
}
</script>
<body>
<div class="panel">
<div class="front">
<div class="pad1">
</div>
</div>
<div class="back">
<div class="pad2"
</div>
</div>
</div>

<div id="trail" style="height:50px; width:50px; position:absolute; margin-left:200px; margin-top:350px; background-color:red;">
</div>
</body>
</html>
the problem is the remove class part is not functioning. what to do????

Answer
Watch
Like Be the first to like this
986 views

1 answer

1 accepted

4 votes
Answer accepted
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
July 20, 2013

Not sure if this will work but your JS is way more than you need. Try this instead;

$(function() {
  $('#trail').click(function() {
    $('.panel').toggleClass('flip');
  });
});

Reply

Suggest an answer

Log in or Sign up to answer
Product apps
Apps & Integrations
TAGS
AUG Leaders

Atlassian Community Events

    See all events
    Community
    Forums
    FAQs Forums guidelines
    Learning
    About learning Resources
    Events
    Champions
    Copyright © 2025 Atlassian
    Privacy Policy Terms Security
    Welcome illustration

    Welcome to the new Atlassian Community

    Online forums and learning are now in one easy-to-use experience.

    By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.