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
|
Matrix fonksiyonu ile tüm dönüşümleri tek satırda uygulama
|
Kendin Dene
|
8376 kez okundu.