Tạo 3D Animating Sidebar với CSS3

18/04/2014

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.

tao-3d-animating-sidebar-voi-css3

Xem Demo | Download

HTML

Để tạo hiệu ứng 3D như trong demo, 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.

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

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Quang Đinh

    Sao mình xem demo thấy nó đứng cứng ngắc à

    • papyrut

      Bạn nên xem trên trình duyệt Firefox để có thể thấy được hiệu ứng, còn nếu bạn làm trên máy của mình thì nên thêm tiền tồ -webkit, -os… ở phần thuộc tính css phù hợp với từng loại trình duyệt