Animation on Hover

<!DOCTYPE html>
<html>
<head>
<style>
body
{
color: #fff;
font: 600 14px/24px "Open Sans",

"HelveticaNeue-Light", "Helvetica
Neue Light", "Helvetica Neue", Helvetica, Arial,

"Lucida Grande", Sans-
Serif;
margin: 12px 15px;
}
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box
{
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin
{
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover
{
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.box-1 {
transform: scaleX(.5);
}
.box-2 {
transform: scaleY(1.15);
}
.box-3 {
transform: scale(.5, 1.15);
}
</style>
</head>
<body>
<div class="original">
<div class="spin">
<figure class="box box-1">Box 1</figure>
</div>
</div>
<div class="original">
<div class="spin">
<figure class="box box-2">Box 2</figure>
</div>
</div>
<div class="original">
<div class="spin">
<figure class="box box-3">Box 3</figure>
</div>
</div>
</body>
</html>

Comments

Post a Comment

Popular Posts