transform :
2D ve 3D elementleri döndürmek, boyutlandırmak, eğmek gibi eylemleri gerçekleştirmek için kullanılır.
Örnek
div { margin: 20px; width: 300px; height: 300px; background-color: red; color: white; -ms-transform: rotate(150deg); /* IE 9 */ -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */ transform: rotate(150deg); }
Codepen Ön izleme
Css Sözdizimi
Değer | Açıklama |
none | Hiç bir değer almaz. |
matrix(n,n,n,n,n,n) | Parantez içine gireceğimiz altı değere göre 2D dönüşümünü tamamlar. |
Matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Parantez içine gireceğimiz on altı değere göre 3D dönüşümünü tamamlar. |
Translate(x,y) | 2D dönüşüm tanımlanır. |
Translate(x,y) | 2D dönüşüm tanımlanır. |
Translate(x,y) | 2D dönüşüm tanımlanır. |
Translate3D(x,y,z) | 3D dönüşüm tanımlanır. |
TranslateX(x) | Yalnızca x eksenini kullanarak bir dönüşüm tanımlanır. |
TranslateY(y) | Yalnızca y eksenini kullanarak bir dönüşüm tanımlanır. |
TranslateZ(z) | Yalnızca z eksenini kullanarak bir dönüşüm tanımlanır. |
Scale(x.y) | 2D ölçek dönüşümü tanımlanır. |
Scale3D(x.y,z) | 3D ölçek dönüşümü tanımlanır. |
ScaleX(x) | X eksenini kullanarak bir ölçek dönüşümü tanımlanır. |
ScaleY(y) | Y eksenini kullanarak bir ölçek dönüşümü tanımlanır. |
ScaleZ(z) | Z eksenini kullanarak bir ölçek dönüşümü tanımlanır. |
rotate(x,y,z,angle) | 3D döndürme tanımlanır. |
rotate(angle) | Açı parametresine göre 2D döndürme tanımlar. |
rotateX(angle) | X ekseni boyunca 3D döndürme tanımlar. |
rotateY(angle) | Y ekseni boyunca 3D döndürme tanımlar. |
rotateZ(angle) | Z ekseni boyunca 3D döndürme tanımlar. |
Skew(x-angle,y-angle) | X- Y ekseni boyunca 2D eğme dönüşümü tanımlanır. |
SkewX(angle) | X ekseni boyunca 2D eğme dönüşümü tanımlanır. |
SkewX(angle) | X ekseni boyunca 2D eğme dönüşümü tanımlanır. |
SkewY(angle) | Y ekseni boyunca 2D eğme dönüşümü tanımlanır. |
Perspective(n) | 3D dönüştürülmüş öğeler için tanımlanır. |
İnital | |
İnherit |
Tarayıcı Desteği
Özellik | |||||
---|---|---|---|---|---|
Transform(2D) | 36.0 4.0-webkit |
16.0 3.5-moz |
10.0 9.0-ms |
9.0 3.2-webkit |
23.0 15.0-webkit 10.5-o |
Transform(3D) | 36.0 12.0-webkit |
16.0 10.0-moz |
10.0 | 9.0 4.0-webkit |
23.0 15.0-webkit |