RSS

CSS Flip Boards

05 Sep

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>
<div>
	<div>
		<h2>Front Board</h2>
	</div>

	<div>
		<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.

.flip {
  -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>
		<div>
			<div>
				<h2>Front Board</h2>
			</div>

			<div>
				<h2>Flipped Board</h2>
			</div>
		</div>

		 <div>
			<div>
				<h2>Front Board</h2>
			</div>

			<div>
				<h2>Flipped Board</h2>
			</div>
		</div>
	</div>

	<div>
		<div>
			<div>
				<img src="http://placedog.com/200/200" />
			</div>

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

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

			<div>
				<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 );
}

 

Advertisements
 
1 Comment

Posted by on September 5, 2013 in CSS

 

One response to “CSS Flip Boards

  1. eboaowqz0

    September 15, 2013 at 1:06 pm

    競争はインターネットの土地で簡単に見することができます。チャンスがすることができますより良いあなたのライダーの使用右そして買うもプラダ パックのホールドを得ている場合販売スマート リクルート提供ような。それは速く、便利な同時に、それを主張します。
    プラダ トート
    , miumiu バッグ
    , miumiu 財布

    彼らは良い電源理由の女性は狼削減や早期脱毛からを使用して経る必要があることがありますよりもほんの一握りです。お話しはシード ゴルフの専門のバックパック、タイトリスト ゴルフ バッグの世界中の多くのダファー単語。はい、ゴルファーは関心ボリュームの彼ら自身の後自分のゲームをしながら同じ主な内部値は頻繁に保護するように設計袋になる場合、ダンス クラブを持ち上げるについて実行する素敵なバッグが欲しい。
    プラダ 財布
    , gucci 時計
    , エンポリオアルマーニ 腕時計

    メッセージを押していない高度な電子メールが必要になるべきいくつかの人々 を説得する最高を与えます。トリシアの利点の 1 つそれ行為の優しさなどを得ることを伴うことができる幻想的な気持であった。彼女は喜んで彼女の多数を手伝おう、特に訪問者、そして感じそれ引き継いだ他に配偶者旅行業界で。必然的に、時間は本当にとてもゴージャスにつき、特に誰かがあなたの男 1 待ち時間なし彼の新鮮な靴を解決する場合は、無駄に最後にほとんどの場合。人の男性のほとんどは非常に、そう彼らは時間のための靴に着用です。ちょうど約すべての人に本当に進化して以来の基準は、ファッショナブルな上昇しているファッション競争提供を考えています。
    ディーゼル 時計
    , gucci 時計
    相手の権利を無視しないでください。すぐに私たちの主な非常によく尊敬されている可能性があります。方法のためのもの、インターネット来て文句を作る、英国文書イギリスのコーディングのニュース、広告販売とダイレクト マーケティングに固執する必要があることを忘れないために非常に効果的です。意味する、製品の説明で誤解を招くされている任意のサイトと広告の認識基準局に最適です。

     

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: