Css Transform

Practicing transform and translate animation using css

by sendil J

HTML

<div id="ani">
  &nbsp;
</div>

CSS

#ani {
  width: 100px;
  height: 100px;
  background-color: #adeeff;
  transition: all 1s ease-in-out;/* Transition is used to animate smoothly */
}

#ani:hover {
	/* Transform a div / object either with XY position size or rotation */
  -webkit-transform: translate(100px, 0px) scale(1.2, 1.2) rotate(90deg);
	background-color:pink;
}