11-24-2018, 01:07 PM
CSS3 ile üzerine gelince önyüzünü arkayüzüne dönen resim kodu
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:
Sırada bu kodları şekillendirmek var.
Bu kadar.
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:
Code:
<div class="dondurulecekler">
<div class="tetikleyici">
<img src="BurayaRasimin adresi" class="onyuz">
<div class="arkayuz">
<h1>DÖNEN RESiM</h1>
<hr>
<p>Buraya aciklama girin.</p>
</div>
</div>
</div>Sırada bu kodları şekillendirmek var.
Code:
.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.