Animasi Flip Halaman | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Tab Menu › Widgets › Animasi Flip Halaman

Demo:
Arahkan kursor pada menu untuk melihat flip halaman dan menampilkan dua halaman dalam.

Menu

by
Dahe Ugi


Nasi Timbel
☀
Nasi Liwet
☀
Ayam Goreng
☀
Bebek Goreng
☀
Soto Babat
☀
Soto Ayam
☀
Sop Buntut Sapi
☀
Ikan Bakar

In a restaurant, a menu is a presentation of food and beverage offerings. A menu may be a la carte - which guests use to choose from a list of options - or table d'hôte, in which case a pre-established sequence of courses is served.
"Menu" can also be used in a more general sense, as synonymous with diet, the selection of foods available generally to a particular location or culture.
Wikipedia




More Detail :
Berikut ini adalah kode lengkap untuk membuat Animasi Flip Halaman, lihat cara pemasangannya seperti contoh dalam konten spoiler.


Kode Lengkap Animasi Flip Halaman :

<html>
<head>

<style type="text/css">

div.pad {width:600px; height:400px; padding:0 0 40px 0; margin:20px auto; position:relative; overflow:hidden; background:#aaa; border:40px solid #aaa; border-width:40px 40px 0 40px;}
div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background:#574;
}

div.pad > div > div:nth-of-type(2),
div.pad > div > div:nth-of-type(2) div {
-webkit-transform-origin: 0 -900px;
-moz-transform-origin: 0 -900px;
-ms-transform-origin: 0 -900px;
-o-transform-origin: 0 -900px;
transform-origin: 0 -900px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}

div.pad > div > div:nth-of-type(3),
div.pad > div > div:nth-of-type(3) div {
-webkit-transform-origin: 300px -900px;
-moz-transform-origin: 300px -900px;
-ms-transform-origin: 300px -900px;
-o-transform-origin: 300px -900px;
transform-origin: 300px -900px;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}

div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
}

div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}

div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;}

div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;
-moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
}

div.pad > div:hover > div:nth-of-type(2),
div.pad > div:hover > div:nth-of-type(3),
div.pad > div:hover > div:nth-of-type(2) div,
div.pad > div:hover > div:nth-of-type(3) div
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

div.pad h1 {padding:0; margin:0; text-align:center; font:normal 80px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}
div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#111; padding:20px;}

</style>

</head>
<body>

<div id="info">
Arahkan kursor pada menu untuk melihat flip halaman dan menampilkan dua halaman dalam.
<div class="pad">
<div>
<div><h1>Menu</h1><p>by<br />Dahe Ugi</p></div>

<div><div>
<p>CHICKEN TIKKA MAKHANI<br />&#9728;
THAI GREEN CHICKEN CURRY<br />&#9728;
CHANNA DAAL<br />&#9728;
BEEF BHUNA<br />&#9728;
GOAN VEGETABLE CURRY<br />&#9728;
CHICKEN KORMA<br />&#9728;
BEEF VINDALOO<br />&#9728;
PRAWN MAKHANI</p>
</div></div>
<div><div><p>In a restaurant, a menu is a presentation of food and beverage offerings. A menu may be a la carte - which guests use to choose from a list of options - or table d'h&#244;te, in which case a pre-established sequence of courses is served.<br />"Menu" can also be used in a more general sense, as synonymous with diet, the selection of foods available generally to a particular location or culture.<br /><a href="http://en.wikipedia.org/wiki/Menu">Wikipedia</a></p></div></div>

</div>
</div>
</div> <!-- end of info -->

</body>
</html>

Animasi Flip Halaman ini juga dapat bekerja pada Firefox 4, Safari, Chrome dan Opera.

sumber: cssplay

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan