Tiger Bird Webdesign: Let It Spin!

Wednesday, 5 November 2014

Let It Spin!

Rotating Coin

When you put the cursor on top of the coin it will start spinning around.
To let it spin you have to choose the length of the rotation which is set through animation:rotation (this is the name of the animation so you can choose a random name): seconds s.
In order to show the animation in all browsers don't forget to put the prefix -webkit- in front of the property.
Details of the animation are described in @keyframes rotation. The coin is spinning laterally meaning on its y-axis therefore transform property is set to rotateY(deg).

HTML Code

<!DOCTYPE HTML>
<html>
<head>
<title>Rotating Coin</title>
<LINK rel="stylesheet" type="css/type" href="rotating_coin.css">
</head>

<body>

<div>
<img src="one_euro.png"></img>


</div>

</body>
</html>

CSS Code

div
{position:absolute;
top:200px;
left:300px;
}


img:hover
{-webkit-animation:rotation 5s;
animation:rotation:5s;
}

@-webkit-keyframes rotation
{
0% {-webkit-transform:rotateY(0deg);
trasform:rotateY(0deg);}

100% {-webkit-transform:rotateY(180deg);
trasform:rotateY(180deg);}

}

@keyframes rotation
{
0% {-webkit-transform:rotateY(0deg);
trasform:rotateY(0deg);}
100% {-webkit-transform:rotateY(180deg);
trasform:rotateY(180deg);}
}

Tiger Bird Webdesign

Wednesday, 5 November 2014

Let It Spin!

HTML Code

CSS Code

No comments:

Post a Comment