Creating 3D Image Flip Effect using CSS3 Transistions

January 29, 2015     Nirmal    

CSS3 transitions are a great way to create awesome animation effects without writing any javascripit/jquery. In this article I am going to demonstrate how you you can use CSS3 transitions to create awesome 3D image flip effect. There are also couple of jquery plugins available to achieve the same effect but I like the CSS way as I am fascinated by CSS#. Here is a demo of what we will be building.

front
back

So lets get started.

Here is the basic HTML Code that you would need to generate your markup

<div class="mg-flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="mg-flip-content">
		<div class="front-side">
		 <img src="http://magnigenie.com/wp-content/uploads/2015/01/front.png" alt="front" width="277" height="503" class="aligncenter size-full wp-image-3079" />
		</div>
		<div class="back-side">
		  <img src="http://magnigenie.com/wp-content/uploads/2015/01/back.png" alt="back" width="276" height="503" class="aligncenter size-full wp-image-3078" />
		</div>
	</div>
</div>

Now lets write some cool css3 codes to create awesome 3D flip effect.

.mg-flip-container {
	perspective:1000px;
}
.mg-flip-container:hover .mg-flip-content,
.mg-flip-container.hover .mg-flip-content {
	transform:rotateY(180deg);
}
.mg-flip-container,.front-side,.back-side {
	width: 277px;
	height: 503px;
}
.mg-flip-content {
	transition:.6s; /* Flip duration */
	transform-style:preserve-3d;
	position:relative;
}
.front-side,
.back-side {
	backface-visibility:hidden;
	position:absolute;
	top:0;
	left:0;
}
.front-side {
	z-index:2;
	transform:rotateY(0deg);
}
.back-side {
	transform:rotateY(180deg);
}

So that’s all. Now our awesome 3D Image flip effect is ready and you can just copy and paste the above code and get the flip effect within few seconds. Just move your mouse over the iPhone image and see it in action.

CSS, HTML

Leave a Reply

0
Connecting
Please wait...
Send a message

Sorry, we aren't online at the moment. Leave a message.

Your name
* Email
* Describe your issue
Login now

Need more help? Save time by starting your support request online.

Your name
* Email
* Describe your issue
We're online!
Feedback

Help us help you better! Feel free to leave us any additional feedback.

How do you rate our support?