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

https://viblo.asia/p/tap-tanh-tim-hieu-css-animation-bai-2-transforms-4dbZNpNg5YM

<!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>
PreviousHow to disable text selection highlighting (ok)NextTập tành tìm hiểu CSS animation: Bài 4: vẽ bằng SVG

Last updated

Was this helpful?