CSSUIHTML1 dk okuma

CSS Transform Rehberi: Bölüm 1

transform özelliğini çoğunlukla animasyon oluşturmak, bazen de öğelerin konumunu değiştirmek için kullanırız. Bu rehberde üç farklı yöntemi inceleyeceğiz: translate, scale ve rotate.

Translate, iki boyutlu bir taşıma işlemi yapar. Bu, öğenin mevcut konumuna göre yeniden konumlandırılması anlamına gelir. Bu özellik sayesinde öğeleri istediğiniz yere taşıyabilirsiniz.

Etkileşimli

translate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ut placeat perspiciatis culpa! Accusamus, itaque assumenda? Qui, cumque, eum eaque ratione eveniet necessitatibus odio, similique cum quas rem blanditiis numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aliquam cupiditate vitae. Possimus, labore officiis! Officia non vitae totam, accusamus quasi consequuntur autem itaque laborum iure quisquam alias illo eveniet.

X yönünde taşıma: 0px

Y yönünde taşıma: 0px

CSS kullanımı:

transform: translate(0px, 0px);transform: translateX(0px);transform: translateY(0px);

Scale, verdiğiniz ölçeğe göre öğenin boyutunu değiştirir. Varsayılan değer 1 değeridir. 2 verdiğinizde öğe, tüm alt öğeleriyle birlikte 100% büyür. 0.5 verdiğinizde ise boyutu 50% küçülür.

Etkileşimli

scale

Ölçek: 1

CSS kullanımı:

transform: scale(1);

scale özelliğini X ve Y eksenleri için ayrı ayrı da kullanabilirsiniz. Bu yöntem her zaman estetik bir sonuç vermese de işe yaradığı durumlar vardır.

Etkileşimli

scale

X ölçeği: 1

Y ölçeği: 1

CSS kullanımı:

transform: scale(1);

Rotate, öğenizi döndürmenizi sağlar. Bunun için deg veya turn birimini kullanabilirsiniz. deg biriminde 360, öğenin kendi etrafında bir tam tur dönmesini sağlar. Daha büyük değerlerle birden fazla tur döndürebilirsiniz. turn biriminde ise bir tam tur için 1 değerini kullanırız.

Etkileşimli

rotate

Döndürme: 0deg

CSS kullanımı:

transform: rotate(0deg);

@aykutkardas

Bu içerik size yardımcı olduysa bana bir kahve ısmarlayabilirsiniz.

İlgili yazıSVG Path Komutları

yazılım, tasarım ve yapay zeka üzerine etkileşimli yazı ve kurslardan haberdar olmak için bültene katılabilirsiniz. Ayda en fazla birkaç e-posta alırsınız.