Animasyonlu-Linkli-Kubik-Galeri-Kodu-1

KodSeo Animasyonlu Linkli Kübik Galeri Kodu 1

(Version: KS ALKG1)

Örnek:

Kod:

<script src='http://code.jquery.com/jquery.min.js'></script>
<section class="kutugorunusu"><div class="temel"><div class="kup"><figure class="onn">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 1
            
</a><div class="kod-nav"></div></figure><figure class="arka">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 6
          
</a><div class="kod-nav"></div></figure><figure class="right">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 3

</a><div class="kod-nav"></div></figure><figure class="left">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 2
          
</a><div class="kod-nav"></div></figure><figure class="top">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 4
          
</a><div class="kod-nav"></div></figure><figure class="bottom">
<a href="http://KodSeo.tr.gg">
KodSeo.tr.gg 5
          
</a><div class="kod-nav"></div><noscript><a href="http://KodSeo.tr.gg"></a></noscript></figure></div></div></section>
<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><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>

Kez Okundu

Tüm Sayfalar Toplam 757678 Kez Okundu. Bugün 23 ziyaretçi buradaydı.

Sitemiz En İyi Google Chrome'da Görüntülenir.

Kod Seo

Animasyonlu-Linkli-Kubik-Galeri-Kodu-1

KodSeo Animasyonlu Linkli Kübik Galeri Kodu 1