CSS3 Flip Animation

CSS Animations have a lot of fun.I had also used it in my WordPress template.You can see the demo on Home Page.In this tutorial i will tell you how you can add the flip effect in your Website.
CSS3 Flip Animation

View Demo

CSS3 Flip Animation

Let’s Go.
Step 1: Place the CSS code in your CSS File.

.flip-container {
	perspective: 1000px;
	padding: 0;
	overflow: hidden !important;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 300px;
	height: 300px;
	overflow-y: auto;
}

/* flip speed goes here */
.flip-container .flipper {
	transition: .6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.flip-container .front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.flip-container .front {
	z-index: 2;
	width: 100%;
/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-container .back {
	transform: rotateY(180deg);
	background: white;
	width: 100%;
}

.flip-container .flip_back_title {
	color: #fff;
	font-family: Bree serif;
	font-size: 33px;
	padding: 10px;
}

.flip-container .flip_front_title {
	color: #fff;
	font-family: Bree serif;
	font-size: 82px;
	padding: 10px;
	margin: 30% auto;
	text-align: center;
}

Step 2: Here is the HTML Code

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
            <div class="front">
                <p class="flip_front_title">Wordpress</p>
            </div>
            <div class="back nicescroll">
                <!-- back content -->
                <p class="flip_back_title">Wordpress Tutorials</p>
            </div>
        </div>
    </div>

That’s All

That’s All.You can check out the demo on the Homepage.

View Demo

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *