CSS3 Animasyonlu Linkli Kübik Galeri Kodu!

Bu kendi etrafında dönen kübik
galeri kodu sitenize zenginlik
katacak. Kod hakkında bilmeniz
gereken önemli şey ise şu: Eğer
sitenizde Jquery kullanan bir
kodlama varsa (genelde diğer
galeriler jquery kullanır), kodun
içerisinde bahsedilmiş satırı silmeniz
gerek.

Bu kodlama CSS3 kullanılarak
hazırlandı. Jquery yalnızca
navigasyon için kullanıldı. Kodun hızı
ve performansı bu nedenle sizi hayal
kırıklığına uğratmayacak.

Kod: Tümünü Seç Tümünü Kopyala

<!-- Koddostu Kübik Css3 Galeri Kodu START -->
<!--Telif sahibi:koddostu.com-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->

<!-- Eğer sitenizde JQUERY kütüphanesi varsa, aşağıdaki satırı kaldırın: -->
<script src='http://code.jquery.com/jquery.min.js'></script>

<koddostu>
<section class="kutugorunusu"><div class="temel"><div class="kup"><figure class="onn">
<a href="http://google.com">
Birinci Başlık
           
</a><div class="kod-nav"></div></figure><figure class="arka">
<a href="http://google.com">
Altıncı Başlık
         
</a><div class="kod-nav"></div></figure><figure class="right">
<a href="http://google.com">
Üçüncü Başlık

</a><div class="kod-nav"></div></figure><figure class="left">
<a href="http://google.com">
İkinci Başlık
         
</a><div class="kod-nav"></div></figure><figure class="top">
<a href="http://google.com">
Dördüncü Başlık
         
</a><div class="kod-nav"></div></figure><figure class="bottom">
<a href="http://google.com">
Beşinci Başlık
         
</a><div class="kod-nav"></div></figure></div></div></section>
</koddostu>



<script>$(document).on('click', 'b', function (event) {
   var box = $(this).closest('.kup');
   box.removeClass(panelClassName);
   panelClassName = event.target.className;
   box.addClass(panelClassName);
});$(document).ready(function() {panelClassName = "s-f";$('.kod-nav').html('<b class="s-h">1</b> <b class="s-l">2</b> <b class="s-r">3</b> <b class="s-t">4</b> <b class="s-bt">5</b> <b class="s-b">6</b>');
})</script><style>.kutugorunusu{ width: 300px; height: 300px; -webkit-perspective:1600; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; -webkit-margin-start: 0 !important; -webkit-margin-before: 0 !important; -webkit-margin-end: 0 !important; -webkit-margin-after: 0 !important; } .kup a{ position:absolute;top:0px;left:0px; width:280px !important; height:246px; padding:40px 10px 10px 10px; background:#34495e; background-size:600px 1200px; line-height:32px; font-size:28px; color:#fff; text-decoration:none; font-family:Arial, sans-serif; text-shadow:0px 2px 0px #B2A98F, 0px 4px 10px rgba(0, 0, 0, 0.15), 0px 9px 2px rgba(0, 0, 0, 0.1), 0px 24px 30px rgba(0, 0, 0, 0.1); text-align:center; } .kod-nav{ position: absolute; bottom: 0px; left: 0px; height: 35px;text-align: center; width:300px; font-size:0px; } .kod-nav b{ display:inline-block;background:#222;color:#fff; font-weight:normal !important; line-height:35px; font-family:Arial, sans-serif; width:50px;height:35px; font-size:24px; cursor:pointer; } .kod-nav b:nth-child(1),figure:nth-child(1) a{ background:#e74c3c; } .kod-nav b:nth-child(2),figure:nth-child(4) a{ background:#2ecc71; } .kod-nav b:nth-child(3),figure:nth-child(3) a{ background:#3498db; } .kod-nav b:nth-child(4),figure:nth-child(5) a{ background:#f1c40f; } .kod-nav b:nth-child(5),figure:nth-child(6) a{ background:#9b59b6; } .kod-nav b:nth-child(6),figure:nth-child(2) a{ background:#1abc9c; } .temel { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px ); }</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style>.kup { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; opacity: 1; } .kup figure { display: block; position: absolute; width: 300px; height: 300px; border: none; color: white; margin: 0px; padding: 0px; } .kup.panels-arkaface-invisible figure { -webkit-arkaface-visibility: hidden; -moz-arkaface-visibility: hidden; -o-arkaface-visibility: hidden; arkaface-visibility: hidden; } .kup figure { background-color: #34495e; border:1px solid #bdc3c7; } .kup .onn { -webkit-transform: translateZ(150px ); } .kup .arka { -webkit-transform: rotateX( -180deg ) translateZ( 150px ); } .kup .right { -webkit-transform: rotateY( 90deg ) translateZ( 150px ); } .kup .left { -webkit-transform: rotateY( -90deg ) translateZ( 150px); } .kup .top { -webkit-transform: rotateX( 90deg ) translateZ( 150px ); } .kup .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 150px ); } .kup.s-f { -webkit-transform: translateZ( 0px ); } .kup.s-b { -webkit-transform: rotateX( -180deg ); } .kup.s-r { -webkit-transform: rotateY( -90deg ); } .kup.s-l { -webkit-transform: rotateY( 90deg ); } .kup.s-t { -webkit-transform: rotateX( -90deg ); } .kup.s-bt { -webkit-transform: rotateX( 90deg ); }</style>

<!--Telif sahibi:koddostu.com-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!-- Koddostu Kübik Css3 Galeri Kodu STOP -->

www.onizle.koddostu.com ; Önizleme