Tailwind CSS Transform Sınıfları: scale, rotate, translate ve 3B

v4.3.5 dönüşüm sınıflarını nasıl derliyor?

Aşağıdaki örnekte en sık kullanılan dönüşüm sınıflarını tek bir @source inline() satırıyla derledik. Çıktıyı okurken iki grup göreceksiniz: translate-*, scale-* ve 2B rotate-* sınıfları kendi özelliklerini yazar; skew-* ise transform özelliğini ve bir değişken zincirini kullanır.

@import "tailwindcss" source(none);
@source inline("scale-105 rotate-45 -rotate-12 translate-x-4 -translate-y-1/2 skew-x-6 hover:scale-110");

v4.3.5 ile derlenen CSS (yalnızca @layer utilities kısmı):

@layer utilities {
  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-12 {
    rotate: calc(12deg * -1);
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .skew-x-6 {
    --tw-skew-x: skewX(6deg);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }
  @media (hover: hover) {
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
/* (kısaltıldı: @property ve @layer properties blokları) */

Buradan çıkan birkaç kural var. Birincisi, eksen sınıfları birbirini ezmez: translate-x-4 yalnızca --tw-translate-x değişkenini değiştirir, translate özelliği ise her iki ekseni değişkenlerden okur. Bu yüzden aynı öğeye translate-x-4 ve translate-y-2 yazdığınızda iki değer birlikte uygulanır. Kesilen @property blokları bu değişkenlere başlangıç değeri verir (translate için 0, scale için 1), yani hiç tanımlanmamış eksen nötr kalır. İkincisi, negatif sınıflar başa eklenen tire ile yazılır ve derleyici değeri calc(... * -1) ile çevirir. Üçüncüsü, hover: varyantı v4.3.5'te @media (hover: hover) içine yerleşir; bunun dokunmatik ekranlardaki etkisini hover ve focus durumları yazısında ayrıntılı bulabilirsiniz.

scale: büyütme, küçültme ve aynalama

scale-<sayı> sınıfı sayıyı yüzde olarak yorumlar: scale-105 %105, scale-50 %50 demektir. Ekseni ayırmak için scale-x-* ve scale-y-* kullanılır. Eksi işaretli -scale-x-100 öğeyi yatayda aynalar; derleyici bunu --tw-scale-x: calc(100% * -1) olarak yazar. Skalada olmayan bir oran gerekiyorsa köşeli parantezle keyfi değer verebilirsiniz; scale-[1.7] doğrudan scale: 1.7 üretir. Keyfi değerlerin genel kurallarını arbitrary values yazısı anlatıyor.

.-scale-x-100 {
  --tw-scale-x: calc(100% * -1);
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-x-75 {
  --tw-scale-x: 75%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-y-50 {
  --tw-scale-y: 50%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-\[1\.7\] {
  scale: 1.7;
}
.scale-none {
  scale: none;
}

Tüm bu kurallar v4.3.5 çıktısından alındı. Dikkat ederseniz scale-x-75 yalnızca X değişkenini değiştiriyor; Y ekseni kendi başlangıç değeri olan 1'de kalıyor. scale-none ise scale özelliğini tamamen kapatır ve dönüşümü sıfırlamanın v4'teki doğru yoludur (aşağıdaki sık hatalar bölümüne bakın).

rotate: 2B ve 3B döndürme

rotate-<sayı> değeri derece olarak alır: rotate-45 rotate: 45deg üretir, -rotate-12 ters yönde calc(12deg * -1) verir. Belgede örnek olarak rotate-210 gibi skalada sabit olmayan sayılar da geçer, çünkü değer doğrudan sayıdan hesaplanır. Radyan gibi farklı bir birim için rotate-[3.142rad] yazabilirsiniz. Üç boyutlu döndürme için rotate-x-*, rotate-y-* ve rotate-z-* vardır ve bunlar 2B rotate özelliğine değil transform özelliğine yazılır:

.rotate-x-45 {
  --tw-rotate-x: rotateX(45deg);
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.rotate-y-12 {
  --tw-rotate-y: rotateY(12deg);
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

transform satırındaki var(--tw-rotate-x, ) yazımı boş bir yedek değer içerir: değişken tanımlanmamışsa o parça hiçbir şey üretmez. Böylece rotate-x-45, rotate-y-12 ve skew-x-6 aynı öğede birlikte çalışabilir; her biri zincirdeki kendi halkasını doldurur.

translate: boşluk ölçeği ve kesirler

translate-* sınıflarındaki sayılar boşluk ölçeğinden gelir: translate-x-4 calc(var(--spacing) * 4) olur. Varsayılan temada --spacing 0.25rem olduğundan bu 1rem eder; kök yazı boyutu 16px ise yaklaşık 16px'e karşılık gelir. Ölçeğin ayrıntıları padding, margin ve spacing yazısında. Kesirler ise öğenin kendi boyutunun yüzdesidir, ebeveynin değil: -translate-y-1/2 öğeyi kendi yüksekliğinin yarısı kadar yukarı taşır. Bu özellik, div ortalama tariflerinde kullanılan top-1/2 -translate-y-1/2 kalıbının temelidir.

.translate-full {
  --tw-translate-x: 100%;
  --tw-translate-y: 100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-px {
  --tw-translate-x: 1px;
  --tw-translate-y: 1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-none {
  translate: none;
}

Eksen belirtmeyen translate-full ve translate-px iki ekseni birden ayarlar. translate-z-* ise üçüncü bir değeri devreye sokar; belgeye göre bu sınıfların etkisi için ebeveynde transform-3d bulunmalıdır.

skew ve origin: eğme ve dönme noktası

skew-x-* ve skew-y-* öğeyi derece cinsinden eğer; -skew-y-3 çıktısı --tw-skew-y: skewY(calc(3deg * -1)) olur. Bütün dönüşümler varsayılan olarak öğenin merkezine göre uygulanır; bunu origin-* sınıflarıyla değiştirirsiniz. origin-top-left transform-origin: 0 0, origin-center transform-origin: center üretir. Skalada olmayan bir nokta için alt çizgi boşluk yerine geçer: origin-[33%_75%] çıktısı transform-origin: 33% 75% oldu. Örneğin bir menü simgesini sol üst köşesinden döndürmek isterseniz origin-top-left rotate-12 ikilisini kullanırsınız.

3B dönüşümler: perspective, transform-3d ve backface

Üç boyutlu bir etki için üç parça gerekir. perspective-* izleyicinin sahneye uzaklığını belirler ve genellikle ebeveyne yazılır. transform-3d (transform-style: preserve-3d) çocukların 3B uzayda kalmasını sağlar; karşıtı transform-flat sınıfıdır. backface-hidden ise öğe arkası dönük olduğunda onu gizler. Varsayılan perspektif değerleri tema dosyasından:

Belge bu ölçeği bir kamera benzetmesiyle anlatır: değer küçüldükçe izleyici nesneye yaklaşır ve derinlik etkisi belirginleşir, büyüdükçe sahne düzleşir. perspective-none perspektifi kaldırır, perspective-[750px] keyfi değer verir, perspective-origin-top gibi sınıflar da kaçış noktasını taşır. Kendi değerinizi temaya eklemek için @theme { --perspective-uzak: 1800px; } yazmanız yeterlidir; tema ad alanlarının mantığını @theme direktifi yazısı anlatıyor.

Örnek: üzerine gelince dönen kart

Aşağıdaki iskelette dış kutu perspektifi taşır, iç kutu 3B uzayı korur ve hover'da Y ekseninde 180 derece döner. Arka yüz başlangıçta zaten 180 derece döndürülmüştür ve backface-hidden sayesinde ancak kart çevrilince görünür.

<div class="group size-48 perspective-normal">
  <div class="relative size-full transition-transform duration-500 transform-3d group-hover:rotate-y-180">
    <div class="absolute inset-0 backface-hidden">Ön yüz</div>
    <div class="absolute inset-0 rotate-y-180 backface-hidden">Arka yüz</div>
  </div>
</div>

v4.3.5 ile derlenen CSS'in dönüşümle ilgili kısmı:

.rotate-y-180 {
  --tw-rotate-y: rotateY(180deg);
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.backface-hidden {
  backface-visibility: hidden;
}
.perspective-normal {
  perspective: var(--perspective-normal);
}
.transform-3d {
  transform-style: preserve-3d;
}
@media (hover: hover) {
  :is(:where(.group):hover .group-hover\:rotate-y-180) {
    --tw-rotate-y: rotateY(180deg);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }
}
/* (kısaltıldı: konum, boyut ve @property blokları) */

Çıktı, beklenen her parçanın gerçekten üretildiğini gösteriyor: --perspective-normal tema katmanında 500px olarak tanımlandı, dönüş transform zincirine yazıldı ve group-hover: ebeveynin hover durumuna bağlandı. group ile peer kalıplarının geri kalanı group ve peer kullanımı yazısında. Geçiş süresi ve eğrisi için transition, duration ve ease yazısına bakabilirsiniz.

transform, transform-gpu, transform-cpu ve transform-none

v4'te dönüşüm sınıflarını çalıştırmak için ayrıca transform sınıfı eklemeniz gerekmez; yukarıdaki çıktılarda her sınıf kendi özelliğini zaten yazıyor. transform sınıfı hâlâ derleniyor ve skew ile 3B rotate zincirini uygulayan satırı üretiyor. transform-gpu aynı zincirin başına translateZ(0) ekler; belgeye göre amaç, geçişin CPU yerine GPU ile işlenmesini zorlamaktır. transform-cpu bu eklemeyi geri alır. transform-[matrix(1,2,3,4,5,6)] gibi keyfi değerler ve transform-(--benim-donusum) gibi değişken kısaltmaları da desteklenir.

.transform-gpu {
  transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.transform-none {
  transform: none;
}
@media (width >= 48rem) {
  .md\:transform-none {
    transform: none;
  }
}

Değişkenle değişen açı ve mesafe

Açının ya da kayma mesafesinin çalışma anında belirlendiği durumlarda (örneğin bir ilerleme göstergesinin ibresi) sınıf adını parçalardan birleştirmek işe yaramaz, çünkü derleyici yalnızca kaynakta tam yazılmış sınıfları görür. Bunun yerine sınıfı sabit tutup değeri bir CSS değişkeniyle verirsiniz. Belgelerdeki rotate-(--my-rotation) kısaltması, var() sarmalayıcısını sizin yerinize ekler:

<div class="rotate-(--aci) translate-x-(--kayma)" style="--aci: 30deg; --kayma: 2rem">Ok</div>

.translate-x-\(--kayma\) {
  --tw-translate-x: var(--kayma);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.rotate-\(--aci\) {
  rotate: var(--aci);
}

v4.3.5 çıktısında iki sınıf da değişkeni olduğu gibi okuyor. Böylece JavaScript yalnızca style özelliğindeki --aci değerini değiştirir, sınıf listesi hiç değişmez ve derleme sırasında üretilmemiş bir sınıfa ihtiyaç duyulmaz. Aynı kalıp scale-(--...), translate-y-(--...) ve perspective-(--...) için de geçerlidir. Parantezli sözdiziminin köşeli parantezli keyfi değerlerden farkı arbitrary values yazısında ayrıntılı anlatılıyor.

Geçişle birlikte kullanma: kart kaldırma efekti

Dönüşümler genellikle bir geçişle birlikte kullanılır. transition-transform sınıfının çıktısında transition-property: transform, translate, scale, rotate satırı var; yani dört özelliğin hepsi kapsanıyor. Aşağıdaki kart hover'da 0.25rem yukarı kalkıyor ve %105'e büyüyor:

<a class="block rounded-xl bg-white p-6 shadow-md transition-transform duration-200 hover:-translate-y-1 hover:scale-105">
  Kart
</a>

@media (hover: hover) {
  .hover\:-translate-y-1:hover {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .hover\:scale-105:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}
/* (kısaltıldı: block, rounded-xl, bg-white, p-6, shadow-md ve transition kuralları) */

Bu çıktı v4.3.5 ile derlendi. İki hover sınıfı farklı CSS özelliklerine yazdığı için birbirini ezmez; hem kayma hem büyüme aynı anda uygulanır.

Sık yapılan hatalar

transform-none ile scale veya rotate sıfırlamaya çalışmak

transform-none yalnızca transform: none yazar. scale-150, rotate-45 ve translate-x-4 ise ayrı özelliklere yazıldığından bu sınıftan etkilenmez. Yükseltme rehberi de bunu açıkça belirtir ve sıfırlama için tek tek özellik sınıflarını önerir: scale-150 focus:scale-none. Aynı mantıkla rotate-none ve translate-none kullanılır. v3'ten geçiş ayrıntıları için Tailwind v4 yenilikleri yazısına bakın.

Geçiş listesine yalnızca transform yazmak

Geçiş özelliklerini elle seçtiğinizde transition-[opacity,transform] yazarsanız çıktı transition-property: opacity,transform olur; scale bu listede yoktur ve hover:scale-150 anlık değişir. Doğrusu transition-[opacity,scale] yazmaktır; derlenen kural transition-property: opacity,scale oldu. En kolay yol, dördünü de kapsayan transition-transform sınıfını kullanmaktır.

3B sınıfları ebeveynsiz kullanmak

translate-z-* belgeye göre ancak ebeveynde transform-3d varken işe yarar. Benzer şekilde perspective-* sınıfını döndürdüğünüz öğenin ebeveynine koymayı unutmak, kart örneğindeki derinliğin kaybolmasına yol açar. Derlenen CSS'te kural görünür ama sayfada beklediğiniz sonuç oluşmaz; bu yüzden önce HTML hiyerarşisini kontrol edin.

Dinamik sınıf adı oluşturmak

rotate-${derece} gibi parçalardan birleştirilen adlar kaynak taramada bulunmaz ve CSS üretilmez. Tam sınıf adlarını kaynakta açıkça yazın; nedeni class tarama ve @source yazısında, diğer nedenler class çalışmıyor: sık hatalar yazısında.

Eski v3 alışkanlığıyla her öğeye transform eklemek

v3 projelerinden gelen şablonlarda her dönüşümün önünde bir transform sınıfı görürsünüz. v4.3.5'te bu sınıf derleniyor, ama scale-* ya da rotate-45 için gerekli değil; üstelik boş da değil, skew ve 3B rotate zincirini yazan bir transform satırı üretir. Kafa karışıklığını önlemek için yalnızca gerçekten ihtiyaç duyduğunuz sınıfları bırakın. Gereksiz ya da eski adlı sınıfları tailwindcss canonicalize komutuyla kontrol edebilirsiniz; komut standalone CLI yazısında anlatılıyor.

Sık Sorulan Sorular

v4'te dönüşümün çalışması için transform sınıfı şart mı?

Hayır. Derleme çıktısında scale-*, rotate-* ve translate-* kendi CSS özelliklerini, skew-* ve 3B rotate ise transform zincirini doğrudan yazıyor. transform sınıfı ek bir şey katmaz.

Aynı öğede hem rotate hem scale kullanabilir miyim?

Evet. İkisi ayrı CSS özelliklerine yazıldığı için çakışmaz. Aynı eksende iki farklı değer verirseniz (örneğin iki scale-*) sonuç CSS'teki sıraya göre belirlenir; bu konu çakışan sınıflar yazısında.

Responsive olarak farklı dönüşüm verebilir miyim?

Evet, tüm dönüşüm sınıfları varyantlarla çalışır: rotate-45 md:rotate-60 veya md:transform-none gibi. Kırılma noktalarının ürettiği @media (width >= 48rem) kuralları responsive tasarım yazısında. Mobil öncelikli düzende önce küçük ekranın dönüşümünü yazar, büyük ekranlar için yalnızca değişen değeri eklersiniz; geri kalan eksen değişkenleri kendi değerlerini korur.

Negatif dönüşüm değerleri nasıl yazılır?

Sınıf adının başına tire koyarsınız: -rotate-12, -translate-y-1/2, -skew-y-3, -scale-x-100. Varyant varsa tire varyanttan sonra gelir, örneğin hover:-translate-y-1. Derleyici değeri her durumda calc(... * -1) ile çevirir; bunu yukarıdaki çıktıların hepsinde görebilirsiniz. Keyfi değerlerde iki yol da çalışır: -rotate-[12deg] çıktısı rotate: calc(12deg * -1), rotate-[-12deg] çıktısı ise doğrudan rotate: -12deg oldu.

Kendi perspektif değerimi nasıl eklerim?

@theme içinde --perspective-* ad alanına bir değişken eklersiniz; belgedeki örnek --perspective-remote: 1800px değişkeniyle perspective-remote sınıfını oluşturur.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · Transition, duration ve ease · Animasyon sınıfları · group ve peer · Div ortalama · @theme ile özel tema