CSS'te Transform
Bu dersimizde CSS'te transform konusuna değineceğiz. transform dilimizde dönüşüm anlamına gelmektedir. CSS3 ile gelen bir teknolojidir ve yaygın olarak kullanılmaktadır.
#deneme {
width: 200px;
height: 200px;
background-color: skyblue;
}
Bir önceki dersimizin başında olduğu gibi deneme ID'sine sahip bir div'imiz olsun.
<div id="deneme"></div>
HTML kodlarımız ise bu şekilde.
Çıktımız ise bu şekilde.
translate
translate dilimizde çevirmek anlamına gelmektedir. CSS'te ise özelliğin kullanıldığı nesnenin konumunu değiştirmek, nesneyi kaydırmak için kullanılır.
#deneme2 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme2:hover {
transform: translate(50px);
-webkit-transform: translate(50px);
}
Fare ile deneme2 adlı div'imizin üzerine gelince div'imiz 50px kadar sağa kayacaktır. Bu arada CSS yazdığımız -webkit- ön eki Google Chrome ve Safari tarayıcılarında transform özelliğinin çalışmasını sağlamak için kullanılır. Hemen çıktımıza bakalım.
Görüldüğü gibi div'imiz 50px sağa kaydı.
#deneme3 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme3:hover {
transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
}
Bu sefer div'imizin 50px sağa ve 100px aşağı kaymasını istiyoruz. İlk verdiğimiz değer yatayda, ikinci verdiğimiz değer ise dikeyde kaydırma yapar.
Görüldüğü gibi nesnemiz 50px sağa ve 100px aşağı kaydı.
#deneme4 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme4:hover {
transform: translate(-50px,-100px);
-webkit-transform: translate(-50px,-100px);
}
Sola ve yukarı kaydırmak istersek değerlerimizin başına - (eksi) yazmamız yeterli.
Görüldüğü gibi div'imiz 50px sola ve 100px de yukarı kaydı.
scale
scale dilimizde ölçek anlamına gelmektedir. Uygulanan nesnenin boyutunu, ölçeğini değiştirmek için kullanılır.
#deneme5 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme5:hover {
transform: scale(.5);
-webkit-transform: scale(.5);
}
Bu sefer div'imizi %50 oranında küçülteceğiz.
Görüldüğü gibi fare ile üzerine gelince div'imiz %50 (0.5) oranında küçüldü.
#deneme6 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme6:hover {
transform: scale(.5,.9);
-webkit-transform: scale(.5,.9);
}
translate'de olduğu gibi iki değer kullandığımızda yatay ve dikey'de bir dönüşüm gerçekleşmiş olacaktır. Bu sefer div'imizi yatayda %50, dikeyde %90 oranında ölçeklendireceğiz.
Görüldüğü gibi div'imiz yatayda 0.5, dikeyde 0.9 oranında ölçeklendi.
#deneme7 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme7:hover {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
Ölçeklendirmeyi sadece küçültmek için kullanmayız. Bazen nesnemizi büyütmek içinde kullanırız. Bu sefer div'imizi %50 oranında büyüteceğiz.
Fare ile div'imizin üzerine gelince %50 oranında büyüdüğünü göreceksiniz. İki katı büyütmek isteseydik transform özelliğine scale(2) değerini vermemiz yeterliydi.
rotate
rotate dilimizde döndürmek anlamındadır. İlgili nesneyi döndürmek için kullanılır.
#deneme8 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme8:hover {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
Bu sefer div'imizi 45 derece sağa yatıracağız. deg, degree'nin yani derece'nin kısaltmasıdır.
Fare ile div'imizin üzerine gelince 45 derece sağa yattığını fark edeceksiniz.
#deneme9 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme9:hover {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
Sola yatırmak istesersek başına - (eksi) yazmamız yeterli.
Görüldüğü gibi div'imiz 45 derece sola yattı.
#deneme10 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all 1s ease-in-out;
cursor: pointer;
}
#deneme10:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Div'imizi tam bir tur döndürmek istersek 360 derece yazmamız yeterli.
Fare ile div'imizin üzerine gelince bir saniye içinde kendi ekseni etrafında tam tur döndüğünü göreceksiniz.
#deneme11 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all 3s ease-in-out;
cursor: pointer;
}
#deneme11:hover {
transform: rotate(3600deg);
-webkit-transform: rotate(3600deg);
}
Fantezi yapmak istiyorsanız div'imizi 3 saniye içinde tam 10 tur döndürebilirsiniz.
Görüldüğü div'imizin üzerine gelince 3 saniye içinde 10 tur döndüğünü göreceksiniz.
skew
skew dilimizde eğdirmek, çarpıtmak anlamındadır. Uygulanan nesneyi çarpıtmak için kullanılır.
#deneme12 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme12:hover {
transform: skew(30deg);
-webkit-transform: skew(30deg);
}
Div'imizi 30 derece sağa eğdireceğiz.
Fare ile üzerine gelince 30 derece sağa eğildiğini göreceksiniz.
#deneme13 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme13:hover {
transform: skew(-30deg);
-webkit-transform: skew(-30deg);
}
Sola eğdirmek içinse derecenin başına - (eksi) yazmamız yeterli.
Görüldüğü gibi div'imiz 30 derece sola eğildi.
#deneme14 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme14:hover {
transform: skew(20deg,30deg);
-webkit-transform: skew(20deg,30deg);
}
Diğer değerlerde olduğu gibi iki değer de kullanabilir. Örneğin; bu sefer div'imizi 20 derece sağa ve 30 derece aşağı eğdim. Eğilmenin nasıl gerçekleştiğini daha rahat görebilmeniz için div'e metin ekledim.
Bu bir deneme yazısıdır.
Fare ile div'in üzerine gelince 20 derece sağa ve 30 derece aşağı eğildiğini göreceksiniz.
#deneme15 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s ease-in-out;
cursor: pointer;
}
#deneme15:hover {
transform: skew(-45deg,45deg);
-webkit-transform: skew(-45deg,45deg);
}
Skew ile rotate'e benzer bir döndürme işlemi yapılabilir.
Bu bir deneme yazısıdır.
rotate(45deg)
rotate ile 45 derece sağa döndürdük.
Bu bir deneme yazısıdır.
skew(-45px,45px)
skew ile 45 derece sağa eğdik.
İkisi arasındak fark rotate'de görüntü kalitesi düşerken skew'de herhangi bir görüntü kaybı yaşanmamasıdır. Yazıların görüntü kalitesinden bunu anlayabilirsiniz. Buna rağmen skew'de bir miktar büyüme olduğunu fark etmiş olmalısınız.
Transform Değerlerinin Birlikte Kullanımı
Transform değerlerini birlikte kullanabiliriz. Bunun için yazdığımız değerden sonra boşluk bırakmak yeterlidir.
#deneme16 {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all 1s ease-in-out;
cursor: pointer;
}
#deneme16:hover {
transform: rotate(360deg) scale(.5);
-webkit-transform: rotate(360deg) scale(.5);
background-color: violet;
}
Bu sefer div'imi 360 derece kendi ekseni etrafında döndüreceğim ve %50 oranında küçülteceğim. Ayrıca rengini eflatun yapacağım.
Fare ile div'imizin üzerine gelince bir saniye içinde %50 oranında küçüldüğünü ve kendi ekseni etrafında tam tur attığını göreceksiniz. Rengi ise eflatun olacak.
Transition ve Transform Nerelerde Kullanılabilir?
CSS3 ile gelen bu iki yeni özellik web tasarımcılar tarafından sıklıkla kullanılmaya başlanmıştır. Ben birkaç kullanımını göstereceğim. Umarım faydalı olur.
#cicek {
width: 360px;
height: 270px;
cursor: pointer;
}
.beyaz-cicek {
position: absolute;
top: 10px;
display: block;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.beyaz-cicek:hover {
opacity: 1;
}
cicek adlı 360'a 270 ebatında bir div'imiz olsun. İçerisinde ise mavi ve beyaz olmak üzere 360'a 270 ölçülerinde iki adet görselimiz olsun. Fare ile div'imizin üzerine gelince beyaz çiceği göstereceğiz.
<div id="cicek">
<img src="~/Areas/web_tasarim/Content/img/mavi-cicek.jpg" alt="mavi çicek" />
<img src="~/Areas/web_tasarim/Content/img/beyaz-cicek.jpg" alt="beyaz çicek" class="beyaz-cicek" />
</div>
Kodlarımız ise bu şekilde.
Görüldüğü gibi fare ile mavi çiçeğin üzerine gelince beyaz çiçeğin görünür olduğunu fark edeceksiniz. Burada önemli olan birkaç nokta var: Alta yazılan beyaz çiçek görseli aslında en üsttedir. Çünkü CSS'te en alta yazılan daima en üsttedir. display: block ile resimlerin üst üste binmesini sağladık. position: absolute ve top özellikleri ile resmi div içinde konumlandırdık. opacity ile ise resmin görünürlüğünü değiştirdik.
.cicek {
width: 256px;
height: 256px;
position: relative;
float: left;
margin-left: 15px;
background: skyblue;
cursor: pointer;
transition: all .4s ease-in-out;
}
.cicek:hover {
transform: scale(.82);
-webkit-transform: scale(.82);
}
Bu sefer 256x256'ya cicek class'ına sahip 3 adet div'imiz olsun. Her bir div'in içerisinde ise yine aynı ebatlarda 3 adet farklı resim olsun. Resimlerin üzerine gelince boyutlarını küçülteceğiz.
<div class="cicek">
<img src="~/Areas/web_tasarim/Content/img/cicek1.jpg" alt="cicek 1" />
</div>
<div class="cicek">
<img src="~/Areas/web_tasarim/Content/img/cicek2.jpg" alt="cicek 2" />
</div>
<div class="cicek">
<img src="~/Areas/web_tasarim/Content/img/cicek3.jpg" alt="cicek 3" />
</div>
<div style="clear: both"></div>
Kodlarımız bu şekilde. Eğer en sonda clear: both kullanmasaydık container div'imizin yüksekliği olmayacaktı.
Görüldüğü gibi fare ile üzerinde gelince görselin %18 oranında küçüldüğünü göreceksiniz.
#garanti {
width: 256px;
height: 256px;
background: url(/Content/img/guarantee.png);
cursor: pointer;
transition: all .8s ease-in-out;
}
#garanti:hover {
transform: rotate(360deg) scale(.5);
-webkit-transform: rotate(360deg) scale(.5);
}
Son olarak garanti ID'sine sahip bir div'imiz olsun ve arkaplan görseli de guarantee.png olsun. Div'imizin üzerine gelince daha önce yaptığımız gibi 360 derece döndüreceğiz ve %50 oranında küçülteceğiz.
Fare ile guarantee resminin üzerine gelince efektimizin başarılı bir şekilde çalıştığını göreceksiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik de bu kadar. Bir sonraki dersimizde CSS'te text-shadow ve box-shadow konusuna değineceğiz.