CSS3 Animasyonlu Linkli Kübik Galeri Kodu! YENİ!

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.

Önizlemeyi Görmek İçin Tıklayın

<!-- 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 -->

<!-- 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 -->

Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: