# \[ANIMATION] hover khối nổi lên, xuống mượt (ok)

![](https://2939257814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_qP1PdHAy7-XP3i1ZW%2Fuploads%2FfqMZ7yTCKJkEXbANkwfZ%2FScreenshot_2.png?alt=media\&token=3ae7ae85-678d-47b5-9a2f-c3b9af38bdc1)

```
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css" media="screen">
			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);
			}
		</style>
	</head>
	<body>
		<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>
</html>
```
