Hướng dẫn sử dụng 3D Transform trong CSS3
Hiệu ứng 3D Transform CSS3 rất hay. Nhờ hiệu ứng này, bạn có thể tiết kiệm khá nhiều thời gian trong thiết kế và tạo ra những chuyển động đẹp mắt. Trong bài hướng dẫn lần này, Y2Graphic sẽ sử dụng hiệu ứng 3D Transform trong CSS3 để tạo ra một Portfolio đơn giản.
HTML
Do là một dạng Porfolio nên chủ yếu là hình ảnh. Bạn nên chuẩn bị một số file hình với kích thước là 266x186px. Bạn có thể thay đổi kích thước tùy theo yêu cầu của bạn.
CSS
Cuối cùng, ta thêm đoạn Javascript trong đoạn
Hiệu ứng 3D Transform CSS3 rất hay. Nhờ hiệu ứng này, bạn có thể tiết kiệm khá nhiều thời gian trong thiết kế và tạo ra những chuyển động đẹp mắt. Trong bài hướng dẫn lần này, Y2Graphic sẽ sử dụng hiệu ứng 3D Transform trong CSS3 để tạo ra một Portfolio đơn giản.
HTML
Do là một dạng Porfolio nên chủ yếu là hình ảnh. Bạn nên chuẩn bị một số file hình với kích thước là 266x186px. Bạn có thể thay đổi kích thước tùy theo yêu cầu của bạn.
- Code:
<div class="thumb scroll">
<div class="thumb-wrapper">
<img src="/Đường dẫn của hình" alt="" />
<div class="thumb-detail">
<a href="#" target="_blank">
Nội dung
</a>
</div>
</div>
</div>
CSS
- Code:
.thumb {
display:block;
width:266px;
height:186px;
position:relative;
margin-bottom:20px;
margin-right:20px;
float:left;}
.thumb-wrapper {
display:block;
width:100%;
height:100%;}
.thumb img {
width:100%;
height:100%;
position:absolute;
display:block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.thumb .thumb-detail {
display:block;
width:100%;
height:100%;
position:absolute;
background:#000;
font-family:arial;
font-size:16px;}
.thumb .thumb-detail a {
display:block;
width:90%;
height:100%;
text-transform:uppercase;
color:#fff;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-1px;
padding:10px;
font-size:18px;
text-align:center;}
- Code:
.thumb.scroll {
overflow: hidden;}
.thumb.scroll .thumb-detail {
bottom:-280px;}
- Code:
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;}
.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}
.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);}
.thumb.flip img,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#333;}
.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);}
Cuối cùng, ta thêm đoạn Javascript trong đoạn
- Code:
$(function () {
// Utilize the modernzr feature support class to detect CSS 3D transform support
if ($('html').hasClass('csstransforms3d')) {
// if it's supported, remove the scroll effect add the cool card flipping instead
$('.thumb').removeClass('scroll').addClass('flip');
// add/remove flip class that make the transition effect
$('.thumb.flip').hover(
function () {
$(this).find('.thumb-wrapper').addClass('flipIt');
},
function () {
$(this).find('.thumb-wrapper').removeClass('flipIt');
}
);
} else {
// CSS 3D is not supported, use the scroll up effect instead
$('.thumb').hover(
function () {
$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
},
function () {
$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');
}
);
}
});