CSS ile Üzerine Gelince Dönen Resim

Bildiğiniz gibi artık web tasarımında perspektif planlama yapabiliyoruz. Ayrıca transform tanımıyla da tasarımlarımızı istediğimiz yönde çevirebiliyoruz. Bu teknikler önceleri Flash desteğiyle yaptığımız animatif etkileşimleri HTML5 ve CSS3 ile çok daha hızlı ve performanslı yapmamızı sağlıyor. Daha önceleri de bol bol konuştuğumuz geçiş efektleri sayesinde bu animasyonları daha yumuşak hale de getirebiliyoruz.

Bu dersimizde bütün bu teknikleri bir arada kullanarak güzel bir hover efekti oluşturduk.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 ile üzerine gelince dönen resim nasıl yapılır?

Bu yapı için iki adet görsel hazırlayacağız. Örnekte bir adet resim bir adet yazı alanı oluşturduk. Yazı alanını border-radius ile aynı görselmiş gibi yuvarlak hale getirdik. Bu iki çerçeveyi de absolute şekilde pozisyonlayarak z-index ile hiyerarşik olarak sıraladık. Döndürülecek öğeleri, tetikleyici isimli ayrı bir çerçeve içerisine alarak tasarıma uyarladık.

HTML kodlarımız ile başlayalım.

HTML Kodları

Yukarıda da bahsettiğimiz gibi birbirini kapsayan iki adet çerçevemiz mevcut. Ayrıca onyuz ve arkayuz şekilde isimlendirilmiş yüzeylerimizde tasarım içerisinde yerini alıyor. Bu dizilimde HTML kodları şu şekli alıyor:

<div class="dondurulecekler">
  <div class="tetikleyici">
    <img src="https://www.adobewordpress.com/ads/logo300x300.png" class="onyuz">
    <div class="arkayuz">
      <h1>ADOBEWORDPRESS</h1>
      <hr>
      <p>Adobe program dersleri, WordPress, HTML5 ve CSS3 gibi güncel konuları ele alan Türkçe interaktif eğitim merkezi.</p>
    </div>
  </div>
</div>

Sırada bu kodları şekillendirmek var.

CSS Kodları

İlk olarak çerçevelerimizi ve üstlerine gelince aktifleştirilecek tanımlamaları hazırlayalım.

.dondurulecekler {
	perspective: 1000;
}

.dondurulecekler:hover .tetikleyici, .dondurulecekler.hover .tetikleyici {
	transform: rotateY(180deg);
}

Şimdi onyuz tasarımını yapalım.

.dondurulecekler, .onyuz{
    width: 300px;
    height: 300px;
}

.onyuz {
	z-index: 2;
	transform: rotateY(0deg);
}

Sırada arkayuz tasarımı var. Burada her kenara 50 piksellik padding uyguladığımız için 300 piksel olan genişlik ve yüksekliği 100 düşürüyoruz.

.arkayuz {
    background-color:#5bc0de;
    border-radius:100%;
    text-align:center;
    color:white;
    width: 200px;
    height: 200px;
    padding:50px;
    box-shadow:inset 0px 0px 0px 5px #46b8da;
    transform: rotateY(180deg);
}

Tetikleyicimizi ve onyuz & arkayuz için ortak tanımları girelim.

.tetikleyici {
    transition: 0.4s;
    transform-style: preserve-3d;
    position: relative;
}

.onyuz, .arkayuz {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

Şimdi arkayuz isimli divisiondaki tasarımları stilize edelim.

.arkayuz h1{
    margin:15px 0;
    font-size:20px;
    color:white;
    font-weight:700;
}

.arkayuz hr{
    border:1px solid #46b8da;
    margin:15px 0;
}

.arkayuz p{
    font-size:16px;
    color:white;
    line-height:170%;
}

Bu kadar.

Kapanış

Bu yapı daha önce hazırladığımız CSS ile SEO ve performans dostu harika resim açıklamaları” isimli makalemizin 2. versiyonu gibi oldu. Daha önce görmediyseniz ona da göz atmak istersiniz.

İyi çalışmalar.