Örnek
döndürülmüş elementin taban yerleşimini ayarlayın:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Kendin dene " Tanımı ve Kullanımı
dönüşümü kökenli özelliği dönüştürülmüş elemanların konumunu değiştirmek için izin verir.
2B dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümleri ayrıca bir elemanın z ekseni değiştirebilir.
Daha iyi dönüşümü kökenli özelliğini anlamak için, bir demo görmek .
Note: Bu özellik ile birlikte kullanılması gerekir dönüşümü özelliği.
Tip: 3D dönüşümleri için daha iyi, bu özelliği anlamak için bir demo görmek .
| Varsayılan değer: | 50% 50% 0 |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.transformOrigin="0 0" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4,0 -webkit- | 10.0 9,0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4,0 -webkit- | 23.0 15.0 -webkit- |
CSS sözdizimi
transform-origin: Mülkiyet Değerler Mülk değeri Açıklama x-axis Görünüş x-ekseninde yerleştirildiği tanımlar. Olası değerler: - ayrıldı
- merkez
- sağ
- length
- %
y-axis görünüşüdür Y ekseni de yerleştirildiği tanımlar. Olası değerler: - üst
- merkez
- alt
- length
- %
z-axis Görünüşüdür z ekseni de yerleştirildiği tanımlar (for 3D transformations) . Olası değerler: - length
ilk varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun miras almak üst öğesinden bu özelliği devralır. Yaklaşık miras oku
İlgili Sayfalar
CSS öğretici: CSS 2D Dönüşümler
CSS öğretici: CSS 3D Dönüşümler
HTML DOM referansı: transformOrigin property