Flip animation

HTML & CSS
1

I found this animation on the David Walsh blog. I actually like it! What I don’t like though is that he uses a fixed height and absolute positioned divs (frond and back). I am using Bootstrap along with Flexbox. As soon as I use the absolute propery everything is going out of place, when I dont use the absolute property and hover the front, the back div is ending up under the front div. This is my HTML:

<section class="content">
	<div class="container">
		<div class="col-md-3 col-sm-6 flip-container" ontouchstart="this.classList.toggle('hover');">
			<div class="flipper">
				<div class="col front">.......</div>
				<div class="col back">.......</div>
			</div>
		</div>
		
		// another 3 columns
	</div>
</div>

And this is what I have in my CSS so far:

.featured-services
{
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;	
}

.featured-services .flip-container 
{
	margin: 0 !important;
	perspective: 1000px;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container .flipper 
{	
	transition: 0.7s;
	transform-style: preserve-3d;
	position: relative;
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.col {
  	flex: 1;
  	padding: 10px 5px;
	text-align: center;
}

.front, .back {
	height: 100% !important;
	backface-visibility: hidden;
}

.front
{
	z-index: 2;
	transform: rotateY(0deg);
	background: #FFFFFF;	
}

.back
{
	transform: rotateY(180deg);
	background: RGB(237,31,36); 
	color: #FFF !important;
}

Note: this is without the fixed height and absolute positioned frond and back. But like I said when I hover it the back ends up under the front. Is there any other way to accomplish this flip effect without the fixed height and absolute positioned divs.? Thank you in advance

2

One of the items has to be absolutely positioned assuming you want the flip effect in the same place. Otherwise they will just stack underneath each other?

You cam make one position:relative and the other absolutely positioned but they do need to be the same size even if you don;t set a height.

e.g.


.featured-services {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.featured-services .flip-container {
	margin: 0 !important;
	perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}
.flip-container .flipper {
	transition: 0.7s;
	transform-style: preserve-3d;
	position: relative;
}
.col {
	padding: 10px 5px;
	text-align: center;
}
.front, .back {
	height: 100%;
	backface-visibility: hidden;
}
.front {
	position:relative;
	z-index: 2;
	transform: rotateY(0deg);
	background: blue;
}
.back {
	transform: rotateY(180deg);
	background: RGB(237,31,36);
	color: #FFF;
	position:absolute;
	top:0;
	left:0;
	right:0;
}

The above is flipping the blue block into the red block in the same space.

4

Hi Paul. Thank you so much for the reply and sollution. That works great. You made me a happy bunny :slight_smile: The one absolute positioned div is ok. I had way more problems with the fixed height. Again thank you very much. :+1:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.