Animation

CSS Flip Boards

In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to have one board flip on the horizontal and another board which will flip on the vertical.

This effect can be used to hide content from the user until they hover over the board this will then display the hidden board.

front board

flipped board

View the demo to see the effect.

Demo There are a number of CSS3 properties we need to use to achieve this effect.

The HTML

First we start off with the HTML for the boards. Each board is made up of a div element with another 2 div elements inside, these are elements we are going to use as the front board and the flipped board.

<div class="flip-boards">
<div class="board top">
	<div class="front">
		<h2>Front Board</h2>
	</div>

	<div class="flipped">
		<h2>Flipped Board</h2>
	</div>
</div>
</div>

Styling The Boards

To create the effect of the flipped board we are first going to style the boards.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
}

This will style the boards the same size and will position them in the same space so that they overlap each other.

You can change the background of the boards to make it easier to see the difference between the two boards.

.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250);
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238);
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}

With the flip board we need to hide the second board from view until it can be flipped around to see it. For this we use the CSS property backface-visibility, this property is related to the 3D transforms of the element. Using 3D transforms you can flip an element on the y-axis so that the front of the element is now facing in the opposite direction. Using the backface-visibility you can hide any elements that are not facing the front of the screen.

.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
 
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  backface-visibility:     hidden;
}

This code spins the element 180 degrees so that the front is now facing away from screen and now the element can be hidden by using the backface-visibility property. Now we can add this to our page by using the following CSS.

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
}

.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

Now the flipped board will be hidden from view, the way we display this again is to flip the board on the hover event.

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

We should also add a transition effect so that there is a smooth flip when rotating the board, this is done by using CSS transition, we also need to make sure that when the boards transforms it will preserve the 3D space by using the property transform-style.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

That's all you need to create a flip board look which will have a hidden div which will be flipped into view when you hover over the board.

View the demo to see it in action.

Demo

Full Code Of The Flip Board

<div class="flip-boards">
		<div class="board top">
			<div class="front">
				<h2>Front Board</h2>
			</div>

			<div class="flipped">
				<h2>Flipped Board</h2>
			</div>
		</div>

		 <div class="board left">
			<div class="front">
				<h2>Front Board</h2>
			</div>

			<div class="flipped">
				<h2>Flipped Board</h2>
			</div>
		</div>
	</div>

	<div class="flip-boards">
		<div class="board top">
			<div class="front">
				<img src="http://placedog.com/200/200" />
			</div>

			<div class="flipped">
				<img src="http://placekitten.com/g/200/200" />
			</div>
		</div>

		 <div class="board left">
			<div class="front">
				<img src="http://placekitten.com/200/200" />
			</div>

			<div class="flipped">
				<img src="http://placedog.com/g/200/200" />
			</div>
		</div>
	</div>
.flip-boards{ position: relative; }
.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
	margin-top:80px;
	font-size: 1em;
}

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

.flip-boards .board.left:hover
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
Back to top

View Demo

Members Download