◄ Min  Size Fonts: + | - | ± Color: Max ►

Animated Rolling 3D Effect CSS 3

Kembali menggeBRAK trick seputaran variable CSS hover Dahulu kala pada waktu 20-11-2011 master Hakim El Hattab ~ @hakimel mengeluarkan article mengenai Rolling Links! Efek berputar ketika link di sorot menggunakan cursor. Dengan sedikit keikutsertaan secuil JavaScript, maka pada sesi penggunaan menjadi simpel. Lantas bagaimana bila hal serupa untuk sekarang dapat dilakukan hanya memakai property CSS? Penasarankan ;))
Sudah barang tentu browse sobat sudah harus mendukung CSS3 property. Penulisan syntax HTML yang rada belibet merupakan satu kendala tersendiri :D Inilah dia Animated-3D-Flipping
KODE CSS
.ani-roll {
margin: 10px auto;
text-align: center;
display: inline-block;
}
.ani-roll a {
color: #fff;
display: block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
.efek-3d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.efek-3d:not(.active):hover {
cursor: pointer;
}
.efek-3d:not(.active):hover .efek-3d-box, .efek-3d:not(.active):focus .efek-3d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.efek-3d-box {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.depan {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
color: #debe94;
background: #21416b;
}
.belakang {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
background: #C79048;
color: #debe94;
box-shadow: 0 3px 5px #000;
text-shadow:0px 0px 0 rgb(187,131,58),1px 1px 0 rgb(168,117,52), 2px 2px 0 rgb(144,101,44),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
.depan, .belakang {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Markup HTML<div class="ani-roll">
<a href="#" class="efek-3d">Animated 3D Flipping
<span class="efek-3d-box">
<span class="depan">Animated 3D Flipping</span>
<span class="belakang">Animated 3D Flipping</span>
</span>
</a>
</div>
Koben mendapatkan trik itu dari master David Walsh ~ @davidwalshblog dengan judul postingan Animated 3D Flipping Menu with CSS Silahkan kalian baca disana guna mendapatkan menu keren punya b-)
Other:
http://zsitro.com/css3-rolling-links/
http://www.dreamdealer.nl/articles/how_to_create_3d_links_rolling_on_hover.html
Happy coding \m/
Loading...
XAnimated Rolling 3D Effect CSS 3
Membuat Animated Rolling 3D Effect menggunakan atribut variabel CSS 3
Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE