When clicking on my div elements, they transform into flipcards and expand to a size of 600px by 600px. I want these divs to be centered in the middle of the screen when clicked, and then move back to their original position when clicked again. I've been searching for a solution but haven't found one that works. Most suggestions involve CSS properties like:
.flip.cover.flipped{
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
}
I tried adding this CSS to the existing .flip.cover.flipped class that is toggled with Javascript onClick, but it didn't center the divs as expected. Here's the full .flip.cover.flipped class:
.flip .cover.flipped {
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
z-index: 10;
}
Other solutions involved using custom JavaScript functions, which I couldn't test out. If a JavaScript function is needed, I just need a simple toggle mechanism like
$(this).find('.cover').toggleClass('flipped');Any assistance on achieving this behavior would be greatly appreciated.
In my recent exploration, I realized that the usual methods center the element within its parent, whereas I require it to be centered within the window, not just the parent element.
Here's the HTML structure:
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125"/>
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
And here's the JavaScript code to toggle the class:
$('.flip').click(function() {
$(this).find('.cover').toggleClass('flipped');
});
Edit: In case the example link changes, below is the full code along with the result: