CSSPortal Playground Examples

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {margin: 40px;}
.share-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
.share-container, .front, .back {
	width: 200px;
	height: 60px;
}
.share-container:hover .back {
	transform: rotateY(0deg);
}
.share-container:hover .front {
    transform: rotateY(180deg);
	}

.front, .back {
	border:2px solid #CCC;
	border-radius:10px;
	line-height:60px;
	text-align:center;
	background:#EEE;
	box-shadow:0 0 2px #aaa;
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
}
.flip-div {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.front {
	z-index: 2;
	color:#666;
	text-shadow:0 0 3px #fff;
	font-size:1.3em;
	font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	transform: rotateY(0deg);
}
.back {
	transform: rotateY(-180deg);
}
.back img {
	vertical-align:middle;
	width:16px;
	height:16px;
}
    </style>
  </head>
  <body>
	<div class="share-container">
		<div class="flip-div">
			<div class="front">
				Share This Page
			</div>
			<div class="back">
				<a href="http://www.facebook.com"><img alt="facebook" src="images/facebook.png" /></a>
				<a href="http://www.google.com"><img alt="google" src="images/google.png" /></a>
				<a href="http://www.twitter.com"><img alt="twitter" src="images/twitter1.png" /></a>
				<a href="http://www.pinterest.com"><img alt="twitter" src="images/pinterest.png" /></a>
			</div>
		</div>
	</div>
  </body>
</html>