<div class="scale">Scale me</div>
<div class="translate">Translate me</div>
<div class="rotate">Rotate me</div>
<div class="skew">Skew me</div>
body {
}
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: coral;
  text-align: center;
  color: white;
  vertical-align: middle;
  margin: 20px;
/* thêm cái này vào để di chuyển cho mượt*/
  transition-duration: 1s;
}
.scale:hover {
  transform: scale(1.5); /* phóng to 1.5 lần*/
}
.translate:hover {
  transform: translateX(500px); /* dịch 500px sang phải*/
}
.rotate:hover {
  transform: rotate(270deg);
}
.skew:hover {
  transform: skew(15deg, 15deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.