Rotate3Di

Zachary Johnson tarafından hazırlanan Rotate3Di,  Css3 dönüşüm yöntemi ile  html içeriklere 3D çevirme özelliği kazandıran bir örnektir.  Her türlü html  içeriklerinizde bu  özelliği  uygulayabilirsiniz. Demonun orjinalini geliştiricinin ismine tıklayarak  görebilirsiniz.  Kendime  göre  biraz  değiştirerek paylaşmak istedim. 
Destekleyen Tarayıcılar

Safari, Chrome, Webkit, Firefox 3.5+, IE9+,  Opera 11+

Kullanım

• Head  etiketleri arasına eklenmesi gereken bölümler.

jQuery, css ve rotate3Di eklentisinin url adresleri :

<link href="css/still.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript" src="js/rotate3di.js"></script>

 JavaScript : 

<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
    $('#nav-list-example li div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    $('#nav-list-example li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
        }
    );
});
</script>

•  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

<ul id="nav-list-example">
    <li>
        <div class="front"><a href="#"><img src="img/1.png" /></a></div>
        <div class="back"><a href="#"><img src="img/1.png" /></a></div>
    </li>
    <li>
        <div class="front"><a href="#"><img src="img/2.png" /></a></div>
        <div class="back"><a href="#"><img src="img/2.png" /></a></div>
    </li>
    <li>
        <div class="front"><a href="#"><img src="img/3.png" /></a></div>
        <div class="back"><a href="#"><img src="img/3.png" /></a></div>
    </li>
    <li>
        <div class="front"><a href="#"><img src="img/4.png" /></a></div>
        <div class="back"><a href="#"><img src="img/4.png" /></a></div>
    </li>
</ul>

Eklenti ile  alakası yok  ama  hazır  eklemişken nasıl yapıldığınıda anlatmakta fayda olacak  sanırım. Demo  sayfasında bulunan resimler bir tane  renkli bir tane de  siyah beyaz  resim kullanılmış  gibi  görünüyor. Aslında  her çerçevede tek bir tane resim bulunuyor.  Her resimden iki tane kullanmak bir websitesi  için fazladan yük demek oluyor. O yüzden Css3 grayscale ile  ön yüzde  bulunan resimlere  siyah beyaz  ayarı verdim ve arka tarafta  bulunan resme  dokunmadım.

Bir  resmi css  ile  siyah beyazmış gibi  göstermek isterseniz  tek yapmanız  gereken css kodlar  içine aşağıdaki kodu eklemeniz yeterlidir.

Css3 GreyScale

img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

Yanıl  dikkat etmeniz gereken bir  diğer önemli  konu  verdiğim css  kodu direk sayfanıza yapıştırırsanız sayfanızdaki bütün resimler siyah beyazolacaktır. Örneğin herhangi bir çerçeve içerisinde  bulunan resimleri siyah beyaz olarak kullanmak istiyorsunuz. Çerçevemizin adı mintik olsun.

Örnek çerçeve

.mintik {
width: 500px
height: 500px
}

Oluşturduğumuz mintik adlı çerçevemiz  hazır. Diğer  çerçevelerde  bulunan resimlerin  GreyScale  özelliğinden etkilenmemesi  için mintik çerçevesindeki  resimleri  seçmemiz gerekiyor. Onun içinde  css kodumuz aşağıdaki gibi  olması gerekiyor.

.mintik img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

Bu şekilde  nesnemizi  seçtiğimiz  zaman sadece  belirlediğimiz çerçeve içindeki resimler siyah beyaz olarak görünecektir.