Init HTML

Xem demo Tải về

Bài viết tham khảo:

• Hiệu ứng Parallax khi Hover với Tilt.js

HTML

Bạn có thể tùy chỉnh HTML theo nhu cầu nhé.

<div class="product-card" data-tilt>
	<img src="img/nike.png" alt="Product">
	<span class="product-price">$39.9</span>
	<a href="#"><h3 class="product-name">Nike</h3></a>
</div>

CSS

CSS quan trọng của hiệu ứng này là transform-style: preserve-3d;.

.product-card {
	width: 300px;
	height: 450px;
	background: rgb(33,105,143);
	background: linear-gradient(120deg, rgba(14,166,239,1) 35%, rgba(33,105,143,1) 100%);
	margin: 0 auto;
	position: relative;
	border-radius: 10px;
	transform-style: preserve-3d;
	transform: perspective(300px);
}
.product-card img {
	width: 300px;
	position: absolute;
	top: 20px;
	left: 80px;
	transform: translateZ(50px);
}
.product-card .product-price {
	position: absolute;
	top: 300px;
	right: 0;
	padding: 10px 20px;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	background: #3e83a4;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.product-card a {
	color: #fff;
	z-index: 999;
}
.product-card .product-name {
	margin: 0;
	padding-block: 10px;
	width: 300px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #14a1e8;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

JavaScript

Để có hiệu ứng khi rê chuột vào, bạn dùng jQuery và tilt.js nhé.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js" integrity="sha512-u1L7Dp3BKUP3gijgSRoMTNxmDl/5o+XOHupwwa7jsI1rMzHrllSLKsGOfqjYl8vrEG+8ghnRPNA/SCltmJCZpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Để rê chuột vào sản phẩm phóng to ra, bạn dùng đoạn mã này.

$('.product-card').tilt({
    scale: 1.1
});

$39.9

Nike

Chúc các bạn thành công!