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: 
Sign up Log in
Products
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
885 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