CSS3 transform

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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir