Flipboard tạo ra một loạt các CSS nút lật ngang trên mình khi con chuột cuộn qua chúng, tạo ra một thanh menu hoặc các hiệu ứng bắt mắt. Nó sử dụng biến đổi CSS3 và chuyển tiếp để làm công việc nặng. Menu hoạt động trong IE10 +, và tất cả các phiên bản hiện đại của FF, Chrome, Safari, và Opera. Nó làm giảm một cách hoàn hảo với các trình duyệt cũ, xuống IE7.
Trên một lưu ý kỹ thuật, mỗi nút bao gồm 3 cấp độ sâu đánh dấu, cụ thể: LI -> A -> SPAN. Điều này là cần thiết để tạo ra hiệu quả mong muốn. Khi con chuột cuộn trên LI mẹ bên ngoài, Mình đã có thể quay cả một vòng bên trong và yếu tố P 180 độ sử dụng rotateY CSS3 biến đổi của (180Deg) giá trị. Chìa khóa ở đây là khai báo giá trị này trên cả hai yếu tố bên trong, vì vậy trong khi đứa trẻ. Một yếu tố gây ra bất kỳ nội dung bên trong xuất hiện như một tấm gương của bản thân khi xoay, các yếu tố SPAN con lớn phục hồi nội dung về định hướng đúng đắn của nó.
CSS Code:
<style>
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard li{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a img{
border-width: 0;
}
ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
Nơi đặt của bạn, mã HTML
Địng dạng chữ
<ul class="flipboard">
<li><a href="http://www.iken.hdol.vn/"><span>d</span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span>r</span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span>i</span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span>v</span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span>e</span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span>n</span></a></li>
</ul>
Đây là khoảng cách nếu bạn sử dụng cả đoạn code này (Nếu chọn 1 trong 2 đoạn code bạn k cần phải thêm code này)
<br /><br /><br />
Định dạng hình
<ul class="flipboard">
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/rss-heart.png" /></span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/twitter-heart.png" /></span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/facebook-heart.png" /></span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/google-heart.png" /></span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/stumble-heart.png" /></span></a></li>
<li><a href="http://www.iken.hdol.vn/"><span><img src="media/yahoo-heart.png" /></span></a></li>
</ul>
Chúc các bạn thành công!.
