CSS: Transform: Rotate

CSS: Transform: Rotate kullanımını öğrenelim.

CSS: Transform: Rotate kullanımını öğrenelim.

Çalışmalarımızda bazen icon,resim,çalışmalarımızın amacına göre döndürme işlemini gerçekleştirmek isteriz. Çalışmalarımızda açı vererek farklı bir boyut tasarım oluşturabiliriz. Bu işlemi basit bir şekilde gerçekleştirebiliriz.

Örnek: Arti Soldan- Sağa


.aci_arti {

    width: 200px; /* Genişlik */

    height: 100px; /* Yükseklik */

    background-color: yellow; /* Arkaplan Renk - Sarı */

    /* Döndürme Açı değeri */

    -ms-transform: rotate(7deg); /* IE 9 */

    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */

    transform: rotate(7deg);

}


Css Dosyanız içerisinde yukarıdaki transform rotate kodlamanısını ekleyiniz, karşınıza soldan - sağa doğru döndürme işlemi gerçekleşecektir. Bu işlemi icon,resim gibi elementlerde kullanabilirsiniz.

rotate(7deg): değeri içerisinde 1-180 dereceye kadar döndürebilirsiniz.

Örnek: Eksi Sağdan- Sola

.aci_eksi {

    width: 200px; /* Genişlik */

    height: 100px; /* Yükseklik */

    background-color: yellow; /* Arkaplan Renk - Sarı */

    /* Döndürme Açı değeri */

    -ms-transform: rotate(-30deg); /* IE 9 */

    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */

    transform: rotate(-30deg);

}


Css Dosyanız içerisinde yukarıdaki transform rotate kodlamanısını ekleyiniz, karşınıza sağdan - sola doğru döndürme işlemi gerçekleşecektir. Bu işlemi icon,resim gibi elementlerde kullanabilirsiniz.

rotate(-30deg): değeri içerisinde -1 den -180 dereceye kadar döndürebilirsiniz.

Örnek - İndex.html

<!DOCTYPE html>

<html>

<head>

<style> 

.aci_arti {

    width: 200px; /* Genişlik */

    height: 100px; /* Yükseklik */

    background-color: yellow; /* Arkaplan Renk - Sarı */

    /* Döndürme Açı değeri */

    -ms-transform: rotate(7deg); /* IE 9 */

    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */

    transform: rotate(7deg);

}



.aci_eksi {

    width: 200px; /* Genişlik */

    height: 100px; /* Yükseklik */

    background-color: yellow; /* Arkaplan Renk - Sarı */

    /* Döndürme Açı değeri */

    -ms-transform: rotate(-30deg); /* IE 9 */

    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */

    transform: rotate(-30deg);

}

</style>

</head>

<body>

<div class="aci_arti"></div>

<br>

<br>

<br>

<div class="aci_eksi"></div>

</html>



Çıktı:


Not:
[list]
[*] Internet Explorer 8 ve önceki sürümleri transform özelliğini desteklemez.
[*] Internet Explorer 9 bir alternatif destekler, mülkiyet -ms-transform. IE yeni sürümleri transform özelliği destekler.
[*] Chrome, Safari ve Opera bir alternatif, -webkit-transform özelliğini destekler.
[/list]

Çalışmalarınızda Başarılar Dilerim
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git