Sự kiện

Tạo hiệu ứng 3D Animating Sidebar với CSS3

Danh mục: CSS
 

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.

 

 animate, animation css3, css3, hiệu ứng 3D, css3 tips

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.

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"