Dönüşümü - CSS Hileleri

Anonim

Bu transformözellik, bir öğeyi eğerek, döndürerek, çevirerek veya ölçeklendirerek görsel olarak değiştirmenize olanak tanır:

.element ( width: 20px; height: 20px; transform: scale(20); )

Bildirilen bir yükseklik ve genişlikte bile, bu öğe artık orijinal boyutunun yirmi katına ölçeklenecek:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Bu işleve iki değer verilmesi, onu yatay olarak birinciye ve dikey olarak ikinciye uzatacaktır. Aşağıdaki örnekte, öğe şimdi iki kat genişlikte, ancak orijinal öğenin yarısı yüksekliğinde olacaktır:

.element ( transform: scale(2, .5); )

Veya steno işlevini kullanmadan daha spesifik olabilirsiniz:

transform: scaleX(2); transform: scaleY(.5);

Ancak scale()mevcut olan birçok dönüştürme işlevinden yalnızca biridir:

Değerler

  • scale(): Elemanın boyutunu etkiler. Bu aynı zamanda uygulanır font-size, padding, heightve widthde bir unsuru. Aynı zamanda scaleXve scaleYişlevleri için bir kısa işlevdir.
  • skewX()ve skewY(): Dikdörtgeni paralelkenara dönüştürmek gibi bir öğeyi sola veya sağa eğer. her iki değeri de skew()birleştiren skewX()ve skewYkabul eden bir kısaltmadır .
  • translate(): Bir öğeyi yana veya yukarı ve aşağı hareket ettirir.
  • rotate(): Elemanı mevcut konumundan saat yönünde döndürür.
  • matrix(): Muhtemelen elle yazılması amaçlanmayan, ancak tüm dönüşümleri bir araya getiren bir işlev.
  • perspective(): Öğenin kendisini etkilemez, ancak alt öğelerin 3B dönüşümlerinin dönüşümlerini etkiler ve hepsinin tutarlı bir derinlik perspektifine sahip olmasını sağlar.

Eğim

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

skewXVe skewYbir eleman veya bu şekilde eğim işlevler. Unutmayın: Bir öğeyi eğriltmek için bir steno özelliği yoktur, bu nedenle her iki işlevi de kullanmanız gerekir. Aşağıdaki örnekte, 100px x 100px kareyi sola ve sağa doğru eğebiliriz skewX:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Bu örnekte bir öğeyi dikey olarak eğebiliriz skewY:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Şimdi skew()ikisini birleştirmek için kullanalım :

CodePen'de
CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen skew () stenografi özelliğine
bakın.

Döndür

.element ( transform: rotate(25deg); )

Bu, bir öğeyi orijinal konumundan saat yönünde döndürürken, negatif bir değer onu ters yönde döndürür. İşte bir karenin her üç saniyede bir 360 derece dönmeye devam ettiği basit bir animasyon örneği:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Ayrıca rotateX, rotateYve rotateZişlevlerini de şu şekilde kullanabiliriz :

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Çevirmek

.element ( transform: translate(20px, 10px); )

Bu dönüştürme işlevi, bir öğeyi yana doğru veya yukarı ve aşağı hareket ettirir. Neden sadece üst / sol / alt / sağ kullanmıyorsunuz? Bazen biraz kafa karıştırıcı oluyor. Bunları düzen / konumlandırma olarak düşünürdüm (yine de daha iyi tarayıcı desteğine sahipler) ve bu, bu şeyleri bir geçişin veya animasyonun parçası olarak hareket ettirmenin bir yolu olarak düşünürdüm.

Bu değerler, 10px veya 2.4em gibi herhangi bir uzunluk değeri olabilir. Bir değer, öğeyi sağa hareket ettirir (negatif değerler sola). İkinci bir değer sağlanırsa, bu ikinci değer onu aşağı taşır (negatif değerler yukarı). Veya spesifik bilgi alabilirsiniz:

transform: translateX(value); transform: translateY(value);

Unutulmamalıdır ki, bir elementin kullanılması transformonun etrafında başka elementlerin akmasına neden olmaz. translateAşağıdaki işlevi kullanarak ve yeşil kareyi orijinal konumundan iterek, çevreleyen metnin kare bir blok öğesiymiş gibi nasıl sabit kalacağını göreceğiz:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Dönüşümü açıklamasına bakın.

Ayrıca translate, bu özelliği canlandırmak istiyorsanız, bunun aksine donanımın hızlandırılacağını da belirtmek gerekir position: absolute.

Birden çok değer

Boşluklarla ayrılmış bir listeyle, transformmülke birden çok değer ekleyebilirsiniz :

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Bu dönüşümlerin gerçekleştirileceği bir sıra olduğunu belirtmekte fayda var, yukarıdaki örnekte önce "eğriltme" gerçekleştirilecek ve sonra eleman ölçeklenecek.

Matris

matrixDönüşümü fonksiyonu tek bir bütün dönüşümleri birleştirmek için kullanılabilir. Bu biraz dönüşüm kısaltması gibi, ancak gerçekten elle yazılması gerektiğini düşünmüyorum. Matrix Resolutions gibi, bir grup dönüşümü tek bir matris bildirimine dönüştürebilen araçlar var. Belki bazı durumlarda bu, dosya boyutunu azaltabilir, ancak bunun gibi yazar dostu olmayan mikro optimizasyonlar muhtemelen zaman ayırmaya değmez.

Meraklı için, bu:

rotate(45deg) translate(24px, 25px)

şu şekilde de temsil edilebilir:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3B Dönüşümler

Yukarıdaki mülklerin çoğunun 3B sürümleri vardır.

translate3d(x, y, z) translateZ(z)

Üçüncü değer translate3dveya içindeki değer translateZ, öğeyi izleyiciye doğru, negatif değerleri uzaklaştırır.

scale3d(sx, sy, sz) scaleZ(sz)

Üçüncü değer scale3dveya içindeki değer scaleZ, z ekseni boyunca ölçeklendirmeyi etkiler (örneğin, ekrandan doğrudan çıkan hayali çizgi).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXve rotateYbu eksenlerin etrafında 3B alanda bir öğeyi döndürecektir. rotate3d3B alanda, öğenin etrafında döndürüleceği bir nokta belirlemenize olanak tanır.

matrix3d(… )

3B dönüşümü programlı olarak 4 × 4 ızgarada tanımlamanın bir yolu. Hiç kimse bunlardan birini asla elle yazmayacak.

perspective(value)

Bu değer, öğenin kendisini etkilemez, ancak alt öğelerin 3B dönüşümlerinin dönüşümlerini etkiler ve hepsinin tutarlı bir derinlik perspektifine sahip olmasını sağlar.

Daha fazla bilgi

  • MDN Belgeleri dönüştürme ve kullanım.
  • David DeSandro'nun 3D dönüşümlerle ilgili dokümantasyonu
  • Surfin 'Safari: 3D dönüşümler
  • CSS3 dönüşümlerinde W3C belirtimi
  • CSS 3D dönüştürmelerine giriş

Tarayıcı Desteği

2D Dönüşümler

Krom Safari Firefox Opera IE Android iOS
Hiç 3.1+ 3.5+ 10.5+ 9+ 4.1+ En az 4

3B Dönüşümler

Krom Safari Firefox Opera IE Android iOS
10+ 4+ 12+ Yok 10+ 4.1+ 5+

Satıcı önekleri

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )