Codingku

transform

Syntax

transform: none | transform-functions | initial | inherit;

JavaScript Syntax

object.style.transform="rotate(7deg)"
Default value:none
Inherited:tidak
Animatable:ya Read about animatable
Version:CSS3

Attribute Value

default transform: none;

Menghapus transformasi apa pun.

transform: translateX(40px);

Memindahkan elemen pada sumbu horizontal.

transform: translateY(20px);

Memindahkan elemen pada sumbu vertikal.

transform: translateY(100%);

Kamu dapat menggunakan nilai persentase: persentase itu relatif terhadap elemen itu sendiri, dan bukan sebagai induk.

transform: translate(20px, -10%);

Kamu dapat menggunakan translate() dengan dua nilai:

  • nilai pertama untuk sumbu horizontal
  • nilai kedua untuk sumbu vertikal

transform: scaleX(1.5);

Menskala elemen pada sumbu horizontal.

transform: scaleY(0.4);

Menskala elemen pada sumbu vertikal.

transform: scaleY(-2);

Kamu dapat menggunakan nilai negatif: nilai ini akan membalikkan elemen.

transform: scale(0.8, 0.8);

Kamu dapat menggunakan scale() dengan dua nilai:

  • nilai pertama untuk sumbu horizontal
  • nilai kedua untuk sumbu vertikal

Dengan menggunakan nilai yang sama untuk keduanya, kamu dapat menskala secara proporsional.

transform: rotate(45deg);

Memutar elemen.

Kamu bisa memakai:

  • degrees dari 0 ke 360deg
  • gradians dari 0 ke 400grad
  • radians dari 0 ke 2Ď€rad
  • turns dari 0 ke 1turn

transform: skewX(15deg);

Miringkan elemen pada sumbu horizontal.

transform: skewY(45deg);

Miringkan elemen pada sumbu vertikal.

transform: skew(10deg, -20deg);

Kamu dapat menggunakan skew() dengan dua nilai:

  • nilai pertama untuk sumbu horizontal
  • nilai kedua untuk sumbu vertikal

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

Kamu dapat menggabungkan banyak transformasi dengan memisahkannya dengan spasi.