3D Rubik Küp
KODLARI
<!--BS-CANDESTEK.TR.GG--> <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"> BS-CANDESTEK.TR.GG 1 </a>
<div class="kod-nav"> </div>
</figure><figure class="arka"> <a href="http://BS-CANDESTEK.TR.GG"> BS-CANDESTEK.TR.GG 6 </a>
<div class="kod-nav"> </div>
</figure><figure class="right"> <a href="http://BS-CANDESTEK.TR.GG"> BS-CANDESTEK.TR.GG 3 </a>
<div class="kod-nav"> </div>
</figure><figure class="left"> <a href="http://BS-CANDESTEK.TR.GG"> BS-CANDESTEK.TR.GG 2 </a>
<div class="kod-nav"> </div>
</figure><figure class="top"> <a href="http://BS-CANDESTEK.TR.GG"> BS-CANDESTEK.TR.GG 4 </a>
<div class="kod-nav"> </div>
</figure><figure class="bottom"> <a href="http://BS-CANDESTEK.TR.GG"> BS-CANDESTEK.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 type="text/css">.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 type="text/css">.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> <!--BS-CANDESTEK.TR.GG-->