Animation How to - Hover Animation Scale vs Translate

Question

We would like to know how to hover Animation Scale vs Translate.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--   www  . j  a v a 2s  .  c  o  m-->
  padding: 100px;
}

div {
  display: inline-block;
  width: 200px;
  height: 200px;
  font-size: 30px;
  line-height: 200px;
  text-align: center;
  -webkit-transition: .2s;
}

div:nth-child(1) {
  background: rgba(255, 0, 0, .5);
}

div:nth-child(2) {
  background: rgba(0, 0, 255, .5);
}

div:nth-child(1):hover {
  background: rgba(255, 0, 0, .7);
  -webkit-transform: scale(1.2);
}

div:nth-child(2):hover {
  background: rgba(0, 0, 255, .7);
  -webkit-transform: perspective(1200) translateZ(200px);
}
</style>
</head>
<body>
  <div>1</div>
  <div>2</div>
</body>
</html>

The code above is rendered as follows: