Animation How to - Combine CSS3 transition and transform

Question

We would like to know how to combine CSS3 transition and transform.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!-- w  w  w.ja  v a 2 s.c o m-->
  background: #EEE;
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  width: 330px;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

div:hover {
  cursor: pointer;
  -webkit-transform: scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
  -moz-transform: scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
  transform: scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
}
</style>
</head>
<body>
  <div>hover over me</div>
</body>
</html>

The code above is rendered as follows: