Bạn đã bao giờ lướt một trang web và phải “wow” lên vì những hiệu ứng chuyển động 3D mượt mà, đặc biệt là các carousel ảnh xoay vòng đầy ấn tượng chưa? Trông có vẻ phức tạp nhưng bạn có tin không, chúng ta hoàn toàn có thể tạo ra một chiếc “đu quay” ảnh 3D xịn sò như vậy chỉ với HTML và CSS thôi đấy!
Trong bài viết hôm nay, mình sẽ hướng dẫn các bạn từng bước để xây dựng một 3D Image Carousel độc đáo.
Bước 1: Cấu Trúc Html
Trước tiên, chúng ta cần dựng nên bộ khung cho carousel. Cấu trúc HTML của chúng ta khá đơn giản, chỉ bao gồm một div container để chứa toàn bộ carousel và một div nữa để bao quanh các hình ảnh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d Image Carousel</title>
</head>
<body>
<div class="container">
<span style="--i:1"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:2"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:3"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:4"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:5"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:6"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:7"><img src="https://placehold.co/208x300" alt=""></span>
<span style="--i:8"><img src="https://placehold.co/208x300" alt=""></span>
</div>
</body>
</html>Ở đây, mình tạo ra một carousel với 8 ảnh. Bạn có thể thay đổi số lượng ảnh tùy thích nhé! Đừng quên thay image1.jpg, image2.jpg,… bằng link ảnh của bạn.
Bước 2: Phù phép với CSS – Tạo hiệu ứng 3D
Đây là phần thú vị nhất! Chúng ta sẽ dùng CSS để biến những bức ảnh tĩnh thành một vòng xoay 3D sống động.
body {
background-color: #1e272e;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 300px;
width: 208px;
object-fit:cover;
}
.container {
width: 208px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: perspective(1000px);
animation: gallery 20s linear infinite;
cursor: pointer;
}
.container:hover{
animation-play-state: paused;
}
.container span {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(300px);
--webkit-box-reflect: below 2.5px linear-gradient(transparent, transparent, rgba(3, 3, 3, 0.2));
}
.container span img {
position:absolute;
border-radius: 10px;
border: 6px ridge #ccc;
}
@keyframes gallery{
0%{
transform: perspective(1000px) rotateY(0deg);
}
100%{
transform: perspective(1000px) rotateY(360deg);
}
}
