Xoay và lật hình ảnh với hiệu ứng 3D từ CSS3

Các thuộc tính CSS3 có khả năng xoay các thành phần html theo phong cách 3D. CSS3 3D này sẽ giúp bạn biết cách làm thế nào để xoay hoặc lật hai mặt của hình ảnh hoặc thành phần html để tiết lộ nội dung ở phía sau của hình ảnh ban đầu. Khi người sử dụng di chuột lên các hình ảnh hoặc thành phần  html ban đầu họ sẽ thấy hình ảnh lật và xoay với hiệu ứng 3D.

Hiệu ứng phát triển bới mybloggertrick và hoạt động dựa trên nền tảng CSS3 do vậy hoạt động tốt trên các trình duyệt hỗ trợ CSS3 như trên google chrome, firefox10 +, IE10 + và safari. Với các trình duyệt cũ như IE5,6,7 thì hiệu ứng 3D sẽ không xuất hiện mà trình duyệt chỉ hiển thị mông nội dung. 

Bài viết này mình sẽ giới thiệu 2 hiệu ứng cho hình ảnh là xoay là lật. Bạn có thể xem demo của cả 2 style theo link bên dưới:

» VIEW DEMO

» Style1: Xoay dọc ảnh với CSS3 (Upward Rotate 3D Flip).

Ảnh minh họa:

1.1- Đăng nhập vào Blog

1.2- Vào mẫu (Template)

1.3- Chọn Chỉnh sửa HTML (Edit HTML).

1.4. Thêm đoạn code bên dưới vào trước thẻ  ]]></b:skin> :

div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}

div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}

1.5. Lưu mẫu lại

1.6. Để sử dụng bạn thêm đoạn mã sau đây vào 1 widget HTML/javascript hoặc vào phần HTML của bài viết:

<div class="flip" style="display: inline-block; margin-right: 40px">
<div class="rotate x">
<img src="YOUR IMAGE URL 1">
<div>
YOUR DESCRIPTION. <br /><br />
<img src="YOUR IMAGE URL 2" style="margin:0 auto" />
</div>
</div>
</div>

Tùy chỉnh:

• Thay YOUR IMAGE URL 1 thành URL của hình ảnh khi chưa dê chuột vào.
• Thay YOUR IMAGE URL 2 thành URL của hình ảnh sau khi dê chuột vào.
• Thay YOUR DESCRIPTION thành phần mô tả cho hình ảnh khi dê chuột vào.

» Style 2: Xoay, lật hình ảnh qua bên phải (Right side Rotate 3D Flip)!.

Ảnh minh họa:

2.1- Đăng nhập vào Blog

2.2- Vào mẫu (Template)

2.3- Chọn Chỉnh sửa HTML (Edit HTML).

2.4. Thêm đoạn code bên dưới vào trước thẻ  ]]></b:skin> :

div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

2.5. Lưu mẫu lại

2.6. Để sử dụng bạn thêm đoạn mã sau đây vào 1 widget HTML/javascript hoặc vào phần HTML của bài viết:

<div class="flip" style="width: 250px; height: 200px; display: inline-block;">
<div class="rotate y">
<img src="YOUR IMAGE URL 1">
<img src="YOUR IMAGE URL 2">
</div>
</div>

Tùy chỉnh:

• Thay YOUR IMAGE URL 1 thành URL của hình ảnh khi chưa dê chuột vào.
• Thay YOUR IMAGE URL 2 thành URL của hình ảnh sau khi dê chuột vào.

- Chúc thành công!