Hôm nay, tình cờ ghé thăm một blog nước ngoài và mình bị ấn tượng ngay với một hiệu ứng động trên sidebar của blog đó. Và ngay lập tức mình nghĩ ngay tới việc chia sẻ nó cho các bạn, với hiệu ứng này các bạn có thể áp dụng vào ngay cho website hay blog của mình.
HTML
Để tạo hiệu ứng 3D, chúng ta cần đoạn html mẫu như sau:
<div class="sidebar">
<div class="sidebar-rotater">
<!-- sidebar content -->
</div>
</div>
CSS
Và hiệu ứng 3D sẽ được thực thi bởi những đoạn css sau :
.sidebar {
perspective: 800px;
}
.sidebar-rotater {
transform: rotateY(-25deg);
transition: transform 1s;
}
.sidebar-rotater:hover {
transform: rotateY(0deg);
}
Thế là xong rồi đó các bạn, mình hy vọng là các bạn sẽ cảm thấy thích với kiểu hiệu ứng mà mình giới thiệu trong bài viết này.