CSS scale özelliği

Tanım ve kullanım

scale Özellik, elementin boyutunu değiştirmenizi sağlar.

scale Özellik, elementin x ve y eksenlerindeki ölçek oranı değerlerini tanımlar. Ayrıca, elementin z eksenindeki ölçek oranını tanımlayabilirsiniz.

Ölçek değerleri bir değer, iki değer veya üç değer olabilir.

  • Bir değer verilirse, element x ve y eksenlerindeki ölçek oranı aynıdır.
  • İki değer verilirse, element x ve y eksenlerinde belirtilen oranlarda ölçeklendirilir.
  • Üç değer verilirse, element x, y ve z eksenlerinde belirtilen oranlarda ölçeklendirilir.

Daha iyi anlamak için scale Özellik, lütfenGösterim.

Dikkat:Elementi ölçeklendirmenin başka bir tekniksi, CSS scale() fonksiyonu CSS transform özelliği. Bu web sayfasında açıklanan CSS scale Özellik, elementi daha basit ve daha doğrudan bir şekilde ölçeklendirmek için bir yöntem olabilir.

Örnek

Örnek 1

Elementin boyutunu değiştirme:

div {
  scale: 2;
}

Kişisel olarak deneyin

Örnek 2

Eğer scale Özellik iki değer olarak ayarlandığında, x ekseninde ve y ekseninde boyutları ayarlanır. Burada, element x eksenindeki boyutu iki katına çıkar, y eksenindeki boyutu yarıya düşürür:

div {
  scale: 2 50%;
}

Kişisel olarak deneyin

CSS dilbilgisi

scale: x-axis y-axis z-axis|initial|inherit;

Özellik değeri

Değer Açıklama
x-axis

X eksenindeki ölçek oranı tanımlar. Olası değerler:

  • Sayı
  • Yüzde
y-axis

Y eksenindeki ölçek oranı tanımlar. Olası değerler:

  • Sayı
  • Yüzde
z-axis

Z eksenindeki ölçek oranı tanımlar. Olası değerler:

  • Sayı
  • Yüzde
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden miras alır. Bakınız inherit.

Teknik ayrıntılar

Öntanımlı değer: none
Mirasçılık: Hayır
Animasyon yapımı: Destekleniyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.scale="2 0.7"

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

İlgili sayfalar

教程：CSS 2D Çevirme

教程：Eğitim:

CSS 3D ÇevirmeCSS rotate özelliği

CSS 3D ÇevirmeCSS translate özelliği