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

11/12/2013 webmaster

Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta.

Nhằm mang lại cho các bạn có thêm nhiều ví dụ để nâng cao khả năng của mình. Hôm nay mình xin chia sẻ cho các bạn đoạn css giúp chúng ta tạo hiệu ứng Flip 3D. Qua bài viết này, các bạn có thể áp dụng cho những hiệu ứng hình ảnh có trên các website hay blog của mình.

Xem Demo | ~~Download~~

Bước 1 : HTML

Giả sử chúng ta có đoạn html cần tạo hiệu ứng 3D như sau :

<div class="flip3D">
     <div class="back">Box 1 - Back</div>
     <div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
     <div class="back">Box 2 - Back</div>
     <div class="front">Box 2 - Front</div>
</div>

<div class="flip3D">
    <div class="back">Box 3 - Back</div>
    <div class="front">Box 3 - Front</div>
</div>

Bước 2 : Tạo hiệu ứng 3D bằng CSS3

Chúng ta sẽ tận dụng thuộc tính transform và transition trong CSS3 để tạo hiệu ứng Flip 3D , các bạn chỉ cần copy đoạn css sau .

.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
	position:absolute;
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px;
	border-radius: 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}

.flip3D > .back{
	position:absolute;
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF;
	width:240px;
	height:200px;
	border-radius: 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
}

.flip3D:hover > .front{
	-webkit-transform: perspective( 600px ) rotateY( -180deg );
	transform: perspective( 600px ) rotateY( -180deg );
}

.flip3D:hover > .back{
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
}

Xem xong code chắc hẳn các bạn sẽ thấy là rất đơn giản phải không nào. Thực ra chỉ cần hiểu một số thuộc tính này, các bạn có thể tha hồ sáng tạo nhiều hiệu ứng đẹp mắt cho riêng mình. Nếu bạn nào có những hiệu ứng nào đẹp mắt và linh hoạt hơn, thì đừng ngần ngại chia sẻ cho mình và các bạn khác nhé.

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