Css Transform Kullanımı

Bu yazımızda Css’te Transform özelliği nedir? Nasıl kullanabiliriz? onu öğreneceğiz. Transform özelliği ile bir Html etiketi üzerinde döndürme, boyutlandırma, eğme gibi işlemleri gerçekleştirebiliriz.

Bu işlemleri 2D (2 boyutlu) ve 3D (3 boyutlu) olmak üzere 2 farklı şekilde yapabiliyoruz. Şimdi sırasıyla bu işlemleri nasıl yapabileceğimize bakalım.

TRANSLATE YÖNTEMİ

Bir Html etiketinin X, Y ve Z ekseninde konumunu değiştirmek için kullanılır.

► translateX : X eksenindeki konumunu değiştirmek için

► translateY : Y eksenindeki konumunu değiştirmek için

► translateZ : Z eksenindeki konumunu değiştirmek için

► translate : X ve Y eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.

► translate3d : X, Y ve Z eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni, ikinci parametre Y ve üçüncü parametre Z ekseni için uygulanır.

Önemli Vereceğimiz değerler negatif olabilir. Negatif olduğunda tam tersi yönde hareket eder.

3 adet div etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

<style>
div {
width:120px;
height:50px;
background-color:cornflowerblue;
color:#fff;
text-align: center;
margin:20px;
padding:10px;
transition:transform 2s;
}
#translateX:hover{
transform:translateX(50px);
}
#translateY:hover{
transform:translateY(50px);
}
#translate:hover{
transform:translate(50px, -50px);
}
</style>
<div id="translateX">X ekseninde 50px kaydır</div>
<div id="translateY">Y ekseninde 50px kaydır</div>
<div id="translate">X ekseninde 50px, Y ekseninde -50px kaydır</div>

<style>

div {

width:120px;

height:50px;

background-color:cornflowerblue;

color:#fff;

text-align: center;

margin:20px;

padding:10px;

transition:transform 2s;

}

#translateX:hover{

transform:translateX(50px);

}

#translateY:hover{

transform:translateY(50px);

}

#translate:hover{

transform:translate(50px, -50px);

}

</style>

<div id="translateX">X ekseninde 50px kaydır</div>

<div id="translateY">Y ekseninde 50px kaydır</div>

<div id="translate">X ekseninde 50px, Y ekseninde -50px kaydır</div>

ROTATE YÖNTEMİ

2 boyutlu kullanıldığında, Html etiketini saat yönünde veya tam tersi yönde döndürmek için kullanılır.

3 boyutluda ise döndürme işlemi 3 boyutlu olacak şekilde uygulanır.

► rotateX : Html etiketini, 3 boyutlu olarak X ekseninde döndürür.

► rotateY : Html etiketini, 3 boyutlu olarak Y ekseninde döndürür.

► rotateZ : Html etiketini, 3 boyutlu olarak Z ekseninde döndürür.

► rotate : Pozitif değer verildiğinde, Html etiketini 2 boyutlu olarak saat yönünde döndürür. Negatif değer verildiğinde, Html etiketini 2 boyutlu olarak saat yönünün tersine döndürür.

Önemli Vereceğimiz değerler negatif olabilir. Negatif olduğunda saat yönünün tersine döner.

4 adet div etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

<style>
div {
width: 120px;
height: 50px;
background-color: cornflowerblue;
color: #fff;
text-align: center;
margin: 60px;
padding: 10px;
transition: transform 2s;
}
#rotateP:hover {
transform: rotate(90deg);
}
#rotateN:hover {
transform: rotate(-90deg);
}
#rotateX:hover {
transform: rotateX(180deg);
}
#rotateY:hover {
transform: rotateY(180deg);
}
</style>
<div id="rotateP">Saat yönünde 90 derece döndür</div>
<div id="rotateN">Saat yönünün tersine 90 derece döndür</div>
<div id="rotateX">3 boyutlu olarak X ekseninde 180 derece döndür</div>
<div id="rotateY">3 boyutlu olarak Y ekseninde 180 derece döndür</div>

<style>

div {

width: 120px;

height: 50px;

background-color: cornflowerblue;

color: #fff;

text-align: center;

margin: 60px;

padding: 10px;

transition: transform 2s;

}

#rotateP:hover {

transform: rotate(90deg);

}

#rotateN:hover {

transform: rotate(-90deg);

}

#rotateX:hover {

transform: rotateX(180deg);

}

#rotateY:hover {

transform: rotateY(180deg);

}

</style>

<div id="rotateP">Saat yönünde 90 derece döndür</div>

<div id="rotateN">Saat yönünün tersine 90 derece döndür</div>

<div id="rotateX">3 boyutlu olarak X ekseninde 180 derece döndür</div>

<div id="rotateY">3 boyutlu olarak Y ekseninde 180 derece döndür</div>

SCALE YÖNTEMİ

Bir Html etiketini vereceğimiz oranlar ölçüsünde büyütmek veya küçültmek için kullanılır.

► scaleX : Genişliği belirtilen oranda büyütmek veya küçültmek için

► scaleY : Yüksekliği belirtilen oranda büyütmek veya küçültmek için

► scale : Genişliği ve yüksekliği belirtilen oranda büyütmek veya küçültmek için kullanılır. Birinci parametre genişlik için, ikinci parametre yükseklik için uygulanır.

2 adet div etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

<style>
div {
width: 120px;
height: 50px;
background-color: cornflowerblue;
color: #fff;
text-align: center;
margin: 60px;
padding: 10px;
transition: transform 2s;
}
#scaleP:hover {
transform: scale(1.2, 2);
}
#scaleN:hover {
transform: scale(0.5, 0.5);
}
</style>
<div id="scaleP">Genişliğini 1.2 , yüksekliğini 2 katına çıkar</div>
<div id="scaleN">Genişliğini ve yüksekliğini yarı katına düşür.</div>

<style>

div {

width: 120px;

height: 50px;

background-color: cornflowerblue;

color: #fff;

text-align: center;

margin: 60px;

padding: 10px;

transition: transform 2s;

}

#scaleP:hover {

transform: scale(1.2, 2);

}

#scaleN:hover {

transform: scale(0.5, 0.5);

}

</style>

<div id="scaleP">Genişliğini 1.2 , yüksekliğini 2 katına çıkar</div>

<div id="scaleN">Genişliğini ve yüksekliğini yarı katına düşür.</div>

SKEW YÖNTEMİ

Bir Html etiketinin, X ve Y ekseninde belirtilen derece kadar eğilmesini sağlar.

► skewX : X eksenindeki eğilmeyi sağlar.

► skewY : Y eksenindeki eğilmeyi sağlar.

► skew : X ve Y eksenlerindeki eğilmeyi sağlar. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.

3 adet div etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

<style>
div {
width:120px;
height:80px;
background-color:cornflowerblue;
color:#fff;
text-align: center;
margin:20px;
padding:10px;
transition:transform 2s;
}
#skewX:hover{
transform:skewX(30deg);
}
#skewY:hover{
transform:skewY(30deg);
}
#skew:hover{
transform:skew(30deg, -20deg);
}
</style>
<div id="skewX">X ekseni ile 30 derecelik açı oluştur</div>
<div id="skewY">Y ekseni ile 30 derecelik açı oluştur</div>
<div id="skew">X ekseni ile 30, Y ekseni ile -20 derecelik açı oluştur</div>

<style>

div {

width:120px;

height:80px;

background-color:cornflowerblue;

color:#fff;

text-align: center;

margin:20px;

padding:10px;

transition:transform 2s;

}

#skewX:hover{

transform:skewX(30deg);

}

#skewY:hover{

transform:skewY(30deg);

}

#skew:hover{

transform:skew(30deg, -20deg);

}

</style>

<div id="skewX">X ekseni ile 30 derecelik açı oluştur</div>

<div id="skewY">Y ekseni ile 30 derecelik açı oluştur</div>

<div id="skew">X ekseni ile 30, Y ekseni ile -20 derecelik açı oluştur</div>

Birde bu özellikleri birlikte nasıl kullanabileceğimize bakalım.

Bir div etiketi oluşturalım ve div’in üzerine gelindiğinde uygulamalı olarak görelim.

<style>
div {
width: 80px;
height: 80px;
background-color: cornflowerblue;
margin: 20px;
transition: all 2s;
}
div:hover {
transform: translate(50px, 50px) rotate(360deg) scale(1.5);
background-color:greenyellow;
border-radius:50%;
}
</style>
<div></div>

<style>

div {

width: 80px;

height: 80px;

background-color: cornflowerblue;

margin: 20px;

transition: all 2s;

}

div:hover {

transform: translate(50px, 50px) rotate(360deg) scale(1.5);

background-color:greenyellow;

border-radius:50%;

}

</style>

CSS TRANSFORM ÖZELLİĞİ TARAYICI DESTEĞİ

Özellik

Chrome

Firefox

Safari

Opera

transform

36.0

4.0 -webkit-

10.0

9.0 -ms-

16.0

3.5 -moz-

9.0

3.2 -webkit-

23.0

15.0 -webkit-

12.1

10.5 -o-

Bu resimde tarayıcıların 2D (2 Boyutlu) transform özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını ve özelliklerin ön ekler ile birlikte kullanıldığında, hangi versiyondan itibaren sorunsuz çalıştığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Önemli Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.

Örneğin,

/* Ön ekler ile birlikte kullanım örnekleri */
-moz-transform: translate(30px, 40px);
-ms-transform: translate(30px, 40px);
-o-transform: translate(30px, 40px);
-webkit-transform: translate(30px, 40px);
transform: translate(30px, 40px);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
-moz-transform: scale(2,3);
-ms-transform: scale(2,3);
-o-transform: scale(2,3);
-webkit-transform: scale(2,3);
transform: scale(2,3);
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
-webkit-transform: skew(20deg);
transform: skew(20deg);

/* Ön ekler ile birlikte kullanım örnekleri */

-moz-transform: translate(30px, 40px);

-ms-transform: translate(30px, 40px);

-o-transform: translate(30px, 40px);

-webkit-transform: translate(30px, 40px);

transform: translate(30px, 40px);

-moz-transform: rotate(100deg);

-ms-transform: rotate(100deg);

-o-transform: rotate(100deg);

-webkit-transform: rotate(100deg);

transform: rotate(100deg);

-moz-transform: scale(2,3);

-ms-transform: scale(2,3);

-o-transform: scale(2,3);

-webkit-transform: scale(2,3);

transform: scale(2,3);

-moz-transform: skew(20deg);

-ms-transform: skew(20deg);

-o-transform: skew(20deg);

-webkit-transform: skew(20deg);

transform: skew(20deg);

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Css Transform Kullanımı

TRANSLATE YÖNTEMİ

ROTATE YÖNTEMİ

SCALE YÖNTEMİ

SKEW YÖNTEMİ

CSS TRANSFORM ÖZELLİĞİ TARAYICI DESTEĞİ

Yazar Hakkında

Yorum Yazın

TRANSLATE YÖNTEMİ

ROTATE YÖNTEMİ

SCALE YÖNTEMİ

SKEW YÖNTEMİ

CSS TRANSFORM ÖZELLİĞİ TARAYICI DESTEĞİ

Benzer Yazılar

Yazar Hakkında

Yorum Yazın