News Maffat

We Promote Almost Everything…

img
Home / Technology Updates / CSS Trick to Flip Icon – Learn How to Flik Icons

CSS Trick to Flip Icon – Learn How to Flik Icons

/
/
/

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 60612 times.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest
  • Reddit
It is main inner container footer text