CSS3 İki Boyutlu Dönüşümler - 2D Transform


Twitter'da Paylaş Favorilerime Ekle

2D Transform Komutları

CSS3 ile html elemanlarına rotate (döndürme), scale (ölçeklendirme), skew (eğme), translate (kaydırma) gibi efektler uygulayabiliriz.

Bunun için transform özelliği ve uygulanacak dönüşümün türü kullanılır.

Not: Tarayıcıların eski sürümleri için -webkit-, -moz-, -o- ve -ms- ön ekleri kullanılmalıdır. Bu sayfada ilk örneklerde bu yazılmış, diğerlerinde es geçilmiştir.

Örneklerin çalışan hallerini Konu Örnekleri kısmında görebilir ve inceleyebilirsiniz.

Rotate - Nesneleri Döndürme

#kutu1{
    transform: rotate(20deg);
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
}

Negatif değer kullanarak saat yönünün tersine dönmesini sağlayabiliriz.

Skew - Nesneleri Eğme

SkewX fonksiyonu ile x ekseninde, skewY fonksiyonu ile y ekseninde, skew fonksiyonu ile hem x hem de y ekseninde eğim uygulayabiliriz.

Parantez içerisinde kaç derece eğim uygulanacağı belirtilir.

transform: skewX(30deg);
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
 
transform: skewY(30deg);
-ms-transform: skewY(30deg); /* IE 9 */
-webkit-transform: skewY(30deg); /* Safari */
 
transform: skew(30deg);
-ms-transform: skew(30deg); /* IE 9 */
-webkit-transform: skew(30deg, 10deg); /* Safari */

Scale - Nesneleri Ölçeklendirme

Scale fonksiyonu ile nesneleri olduğundan büyük ya da küçük gösterebiliriz. Fonksiyonun parantezleri içine genişlik ve yüksekliğinin kaç kat artırılacağı yazılır. 0 ile 1 arasında verilen değerler nesnenin olduğundan küçük görünmesini sağlar.

Nesnelere bu efekti uyguladığımızda o nesne içindeki elemanlar da büyüyecektir.

transform: scale(1.5,1.5);

Translate - Nesneleri Kaydırma

Html elemanlarının olmaları gereken yerden farklı bir yerde görünmelerini sağlamak position ve top-right-bottom-left özellikleri ile mümkündü. Translate fonksiyonu ile bu işi daha kolay gerçekleştirebiliriz.

Parantez içerisine sırasıyla x ve y ekseninde ne kadar kaydırılacağı yazılır. Negatif değerler sola veya üste kaydırmayı sağlar.

transform: translate(50px,75px);

Matrix Fonksiyonu Kullanarak Birden Fazla Dönüşüm Uygulama

Tek satırda sırasıyla yatay büyütme, dikey eğme (skewY), yatay eğme (skewX), dikey büyütme, yatay kaydırma ve dikey kaydırma miktarları belirtilerek dönüşüm uygulanabilir.

Kullanım şeklini şöyle gösterebiliriz:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

Örnek:

transform: matrix(1, -0.3, 0, 1, 0, 0);

 

css nesneleri döndürme eğme büyütme, css3 transform özelliği, css3 ile html elemanlarına dönüşüm uygulama, nesneleri olması gereken yerden uzağa kaydırma

KONU İLE İLGİLİ ÖRNEKLER

Css transform - rotate örneği Kendin Dene
Css transform - skew örneği Kendin Dene
Css transform - scale örneği Kendin Dene
Css transform - translate örneği Kendin Dene
Matrix fonksiyonu ile tüm dönüşümleri tek satırda uygulama Kendin Dene

YORUMLAR



CSS Dersine Ait Diğer Konular: