CSS Bilgileri -20- CSS transform

Merhaba, CSS dönüşümleri (css transforms) , öğeleri belirli şekillerde şekillendirmeye izin veren bir işlevler topluluğudur.

• translate: öğeyi 3 eksen yönünde hareket ettirir (x, y ve z)
• rotate: öğeyi merkezi bir nokta etrafında hareket ettirir
• scale: öğeyi yeniden boyutlandırır
• skew: öğeyi deforme eder

transform Özellikleri

CSS’te 3 transform özelliği vardır:

• transform: hangi transform fonksiyonunun kullanılacağını belirler (translate, rotate, scale…)
• transform-origin: bir dönüşümün başlangıç noktasını değiştirmeye izin verir (arka plan konumları gibi çalışır)
• transform-style: 3D ayarları içindir

Beklenmeyen davranışları önlemek için, dönüştürülen öğeler sayfa akışını etkilemez. 

translate

translate()fonksiyonu, bir öğeyi düzlem boyunca hareket ettirmeye olanak tanır (x ve y ekseninde). Şunlardan birini kabul eder:

• 1 parametreli kullanım: öğeyi  sadece x ekseninde hareket ettirir.
• 2 parametreli kullanım: ilk değer x ekseni ikinci değer y ekseni içindir.

Relative konumlandırmada sol ve üst yönde konumlandırma yapmaya benzer.

<p>OKT</p>

CSS:

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
p{
  background: darkred;
    color: white;
    height: 60px;
    line-height: 60px;
    margin: 100px;
    position: absolute;
    text-align: center;
    width: 60px;
    animation: translating 4s linear infinite;
}

Görünümü:

Öğenizi yalnızca x ve y ekseni boyunca taşımak için translateX()ve translateY()yöntemlerini kullanabilirsiniz.

rotate

rotate() işlevi, bir öğenin sabit bir nokta etrafında dönmesini sağlar. Varsayılan olarak, öğenin merkezi etrafında döner. Bir pikapta oynanan vinil olarak düşünebiliriz.

rotate()açı değeri derece ( deg ) , gradyan ( grad ) , radyan ( rad ) veya tur ( turn )  / (1 tur tam bir daireye eşdeğerdir) olarak tanımlanmış sadece 1 parametre kabul eder.

<p>OKT</p>

CSS:

@keyframes dondurme {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
p{
    background: darkred;
    color: white;
    height: 60px;
    line-height: 60px;
    margin: 100px;
    position: absolute;
    text-align: center;
    width: 60px;
    border-radius:60px;
    animation: dondurme 4s linear infinite;
}

Görünümü:

scale

scale() fonksiyonu, bir öğenin yeniden boyutlandırılmasını sağlar. Genişletebilir veya daraltabilir. Fonksiyon şunlardan birini kabul eder:

• 1 parametreli kullanım: öğe yükseklik ve genişlik ölçüleri eşit olarak yeniden boyutlandırılır
• 2 parametreli kullanım: ilk değer öğeyi yatay olarak, ikinci değer dikey olarak yeniden boyutlandırır

Olası değer aralığı:

• 1: öğe orijinal boyutunu korur
• 2: öğenin boyutu iki katına çıkar
• 0.5: öğe boyutunun yarısına iner
• 0: öğe kaybolur (yüksekliği ve genişliği sıfıra indirildiği için)
• -1: öğenin yansıması oluşur

<p><strong>scale(1)</strong>: normal boyut</p>
<p><strong>scale(2)</strong>: iki kat boyut</p>
<p><strong>scale(0.5)</strong>: yarım boyut</p>
<p><strong>scale(0)</strong>: sıfır boyut (görünmez)</p>
<p><strong>scale(-1)</strong>: yansıma</p>
<div>OKT</div>

@keyframes boyutlandirma {
  0%  { transform: scale(1);}
  19% { transform: scale(1);}
  20% { transform: scale(2);}
  39% { transform: scale(2);}
  40% { transform: scale(0.5);}
  59% { transform: scale(0.5);}
  60% { transform: scale(0);}
  79% { transform: scale(0);}
  80% { transform: scale(-1);}
  99% { transform: scale(-1);}
  100%{ transform: scale(1);}
}

@keyframes metin-gecisi {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}
p{ 
animation: metin-gecisi 10s steps(1) 0s infinite forwards; 
opacity: 0;
position: absolute;
top: 2rem;
left: 2rem;
z-index: 1;}
p:nth-child(2){ animation-delay: 2s;}
p:nth-child(3){ animation-delay: 4s;}
p:nth-child(4){ animation-delay: 6s;}
p:nth-child(5){ animation-delay: 8s;}
p strong{ content: ""; display: inline-block;}

div{
  background: darkred;
    color: white;
    height: 60px;
    line-height: 60px;
    margin: 100px;
    position: absolute;
    text-align: center;
    width: 60px;
    border-radius:60px;
    animation: boyutlandirma 10s steps(1) 0s infinite;
}

Görünümü:

translate() gibi, scale()işlevi de sırasıyla yatay ve dikey olarak yeniden boyutlandırmak için x ve y versiyonlarına sahiptir: scaleX() ve scaleY().

skew

skew() fonksiyonu, öğenin bir çizgi boyunca kenarlarını sürükleyerek deforme olmasını sağlar.

Bu işlemin etkileri tahmin edilemediği ve sonuçları her zaman güzel olamadığı için nadiren kullanılır. Yine de nasıl çalıştığını öğrenelim.

Aynı scale()gibi, skew()fonksiyonları şunlardan birini kabul eder:

• 1 parametre kullanımı: öğe yatay olarak deforme olur
• 2 parametre kullanımı: ilk değer öğeyi yatay olarak, ikincisi dikey olarak deforme eder

Yine aynı rotate()gibi, skew()de derece ( deg) gibi açı değerlerini kabul eder.

<p><strong>skew(0deg)</strong>: deforme yok</p>
<p><strong>skew(10deg)</strong>: ince yatay deforme</p>
<p><strong>skew(45deg)</strong>: çeyrek deforme</p>
<p><strong>skew(90deg)</strong>: yarı deforme (görünmez)</p>
<p><strong>skew(120deg)</strong>: -60deg ile aynı</p>
<div>OKT</div>

CSS:

@keyframes egriltme {
   0%  { transform: skew(0deg);}
  19% { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  39% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  59% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  79% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  99% { transform: skew(120deg);}
  100%{ transform: skew(180deg);}
}

@keyframes metin-gecisi {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}
 
p{ 
animation: metin-gecisi 10s steps(1) 0s infinite forwards; 
left: 2rem; 
opacity: 0; 
position: absolute; 
top: 2rem; 
z-index: 1;}

p:nth-child(2){ animation-delay: 2s;}
p:nth-child(3){ animation-delay: 4s;}
p:nth-child(4){ animation-delay: 6s;}
p:nth-child(5){ animation-delay: 8s;}

div{ 
animation: egriltme 10s linear infinite;
background: tomato;
color: white;
height: 60px;
line-height: 60px;
margin: 5rem;;
text-align: center;
transition: all 100ms linear; width: 120px;
}

Görünümü:

3D Fonksiyonları

Dönüşüm işlevlerinin bir düzlemde, x ve y ekseni boyunca nasıl çalıştığını gördük.

Tüm bu dönüşüm fonksiyonların bir de 3D versiyonu mevcut.

Örnek olarak translate(), 3 boyut boyunca dönüşüm gerçekleştiren bir translate3d() fonksiyonuna sahiptir. Bu da z eksenini de içerdiği anlamına gelir. Ve tabi ki translateZ()fonksiyonu da mevcuttur.

<div id="zoom-animasyonu">
  <div>Orjinali</div>
  <p>Dönüştürülmüş</p>
</div>

CSS:

#zoom-animasyonu{ padding: 2rem; perspective: 500;}
#zoom-animasyonu div,
#zoom-animasyonu p{ background: midnightblue; color: white; height: 200px; line-height: 200px; margin: 0; position: relative; text-align: center; width: 200px;}
#zoom-animasyonu p{ animation: yaklastir 3s alternate infinite both; background: limegreen; left: 2rem; opacity: 0.7; position: absolute; top: 2rem;}

@keyframes yaklastir {
  0%{ 
  transform: translate3d(0px, 0px, 0px);
  }
  100%{ 
  transform: translate3d(0px, 0px, 200px);
  }
}

Görünümü: