CSS transform-origin Özelliği
CSS transform-origin
Csstransform-origin özeliği ile dönüştürülecek html elemanın orijin noktaları düzenlenebilir.
Örnek:
Bu örnete kutu 60 derece döndürülmüştür. #kutu1 {
position: relative;
height: 180px;
width: 180px;
}
#kutu2 {
position: absolute;
-ms-transform: rotate(60deg);
/* IE 9 */
-ms-transform-origin: 30% 50%;
/* IE 9 */
-webkit-transform: rotate(60deg);
/* Chrome, Safari, Opera */
-webkit-transform-origin: 30% 50%;
/* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 30% 50%;
}
CSS transform-origin nedir nasıl kullanılır
2D dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümler de bir elemanın z - eksenini değiştirebilirsiniz.
CSS transform-origin Tarayıcı Desteği
| CSS Kodu: | |||||
|---|---|---|---|---|---|
| transform-origin |
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 |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS transform-origin Değerleri
transform-origin:x-axis y-axis z-axis|initial|inherit;
CSS transform-origin özelliği değerleri
| CSS transform-origin değerleri | CSS transform-origin değerleri tanımları |
|---|---|
| x-axis | X ekseni üzerindeki konumu belirlenir.Alabileceği değerler:
|
| y-axis | Y ekseni üzerindeki konumu belirlenir.Alabileceği değerler:
|
| z-axis | 3D dönüşümler için konum belirlenebilir. Alacağı değerler: |
| initial | Özelliğin varsayılan değeridir. |
| inherit | Kalıtsal aldğı değer geçerlidir. |
Yorumlar
Yorum Gönder