Bài viết này tôi giới thiệu với các bạn về hiển thị 3D cho phần tử với CSS3 transform3D qua một ví dụ sử dụng thuộc tính này tạo hiệu ứng flip flop khi hover vào menu.
Demo
Download
Mở đầu với mã HTML
Code
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Sau đó bạn sử dụng một chút mã jQuery để thêm thẻ span vào bên trong thẻ li.
Code
$('.navigation').find('a').each(function(){
el = $(this);
text = el.html();
$('<span></span>').html(text).insertAfter(el);
};)
Hoặc bạn có thể tự code như sau :
Code
<ul class="navigation">
<li>
<a href="#">Home</a>
<span>Home</span>
</li>
<!--vân vân-->
</ul>
Mã CSS
Code
body{
font-family:helvetica;
font-size:12px;
color:#fff;
background:url(../img/bg.jpg) no-repeat fixed;
}
a{
color:#fff;
}
.navigation{
display:inline-block;
position:relative;
}
.navigation li{
display:inline-block;
position:relative;
float:left;
text-transform:uppercase;
letter-spacing:1px;
}
.navigation span{
box-shadow:0 0 5px rgba(0,0,0,0.5);
float:left;
display:block;
padding:0px 20px;
height:30px;
line-height:30px;
background-color:red;
position:relative;
background-image:linear-gradient(top,#4a4a4a,#1f1f1f);
cursor:pointer;
}
.navigation a{
box-shadow:0 0 5px rgba(0,0,0,0.5);
position:absolute;
top:15px;
left:0;
display:block;
padding:0 20px;
height:30px;
line-height:30px;
background-image:linear-gradient(bottom,#e3e3e3,#f8f8f8);
color:#232323;
}
/*--bo tròn góc đầu và cuối của menu--*/
.navigation li:first-child span{
border-radius:3px 0 0 3px;
}
.navigation li:last-child span{
border-radius:0 3px 3px 0;
}
.navigation li:first-child a{
border-radius:3px 0 0 3px;
}
.navigation li:last-child a{
border-radius:0 3px 3px 0;
}
Tạo hiển thị 3D với CSS3Với mã css trên thẻ span và thẻ a sẽ hiển thị:
Sau đó ta thêm giá trị rotateX(-90deg) cho thẻ a (chú ý chiều dài của thẻ a và span là 30px ).
Cuối cùng thêm giá trị translateZ(15px) cho thẻ span.
Rồi khi hover vào thẻ li ta cho nó quay 90 độ với rotateX(90deg) sẽ được kết quả sau:
Giờ ta thực hiện lần lượt các bước trên với mã CSS3:
Code
.navigation{
/*--code trước--*/
perspective: 2000px;
}
.navigation li{
/*--code trước--*/
transition:all 0.5s ease;
transform-style: preserve-3d;
}
.navigation span{
/*--code trước--*/
transform:translateZ(15px);
}
.navigation a{
/*--code trước--*/
transform:rotateX(-90deg);
}
.navigation li:hover{
transform:rotateX(90deg);
}
Chú ý giá trị perspective: 2000px; cho ta độ sâu của không gian 3D là 2000px, transform-style: preserve-3d; cho phép phần tử đó được hiển thị dưới dạng 3D. Ở đây tôi mới có code dạng chung, các bạn nhớ thêm -moz- , -webkit- , -o- , -ms- cho các giá trị transform, transition…
