Technology Updates

CSS Trick to Flip Icon – Learn How to Flik Icons

flip CSS triks
Written by Team Maffat

Here, we can implement some CSS tricks for rotating coin 360 degree. this approach used in many sites which looks greater and attractive transformation on Mouse hover . . .

You can put any image like below style and rotate 360 degree on it’s own position. Also, put these effect as menu rotate with it’s click event and give awesome looks for your website.

coin flip

Coin Flip

for rotation put some CSS code like :

.main-container
{
	perspective: 1000px;
	-webkit-perspective: 800px;
	width:480px;
	height:480px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
}

.coin-front,
.coin-back
{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	width:319px;
	height:358px;

	position:absolute;
	top:50%;
	left:50%;
	margin:-166px 0 0 -155px;

	background:url(coin.png) no-repeat left center;

	transition:0.8s;
}

.coin-back
{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);

	background-position:right center;
}

.main-container:hover .coin-front
{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.main-container:hover .coin-back
{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

And add or implement this css code in your htm file like :

<div class="main-container">
	<div class="coin-front"></div>
	<div class="coin-back"></div>
</div>

So, full code is looks like below and it’s effect is awesome . . .

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coin Rotation</title>
<style type="text/css">

.main-container
{
	perspective: 1000px;
	-webkit-perspective: 800px;
	width:480px;
	height:480px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
}

.coin-front,
.coin-back
{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	width:319px;
	height:358px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-166px 0 0 -155px;
	background:url(coin.png) no-repeat left center;
	transition:0.8s;
}

.coin-back
{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	background-position:right center;
}

.main-container:hover .coin-front
{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.main-container:hover .coin-back
{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

</style>
</head>
<body>
<div class="main-container">
	<div class="coin-front"></div>
	<div class="coin-back"></div>
</div>
</body>
</html>

 

 



This post has been seen 614 times.

About the author

Team Maffat

News Maffat Com is a Free Guest Blogging Website.
Must Try once.