<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<img src="http://images.clipartpanda.com/clouds-background-png-CloudImage.png">
<div class="circle">Hover Me</div>
</div>
body{
background: lightblue;
text-align: center;
}
.wrapper{
width: 1005;
padding: 20px;
box-sizing:border;
}
img {
/*
note: there are 2 value in parameter 1st is X and 2nd is Y;
transform: translate(-200px , 200px);
transform: scale(3,0.5);
transform: rotateX(90deg);
transform: rotateY(90deg);
transform: rotate(90deg);
transform: rotateZ(-90deg) translateY(200px) scale(2);
*/
}
.circle{
width: 100px;
padding: 50px 0px;
line-height: 0;
margin: 60px auto;
background: pink;
color: white;
border-radius: 50px;
cursor: pointer;
/*transition: 1s;*/
transition: background 1s,transform 1s 1s ease-in; /*separate transition effect in one property*/
}
.circle:hover{
background: salmon;
transform: rotate(360deg);
}
