Properti ini menggunakan beberapa method / fungsi khusus sebagai nilainya. Beberapa fungsi yang bisa digunakan sebagai properti transform bisa kalian lihat di bawah ini.
- rotate : Rotasi 2D
- rotatex : Rotasi berdasarkan sumbu x
- rotatey : Rotasi berdasarkan sumbu y
- rotatez : Rotasi berdasarkan sumbu z
- rotate3d : Rotasi 3d
- scale : Skala / perbesaran 2d
- scalex : Skala berdasarkan sumbu x
- scaley : Skala berdasarkan sumbu y
- scalez : Skala berdasarkan sumbu z
- scale3d : Skala 3d
- skew : Perubahan kemiringan
- skewx : Perubahan kemiringan horisontal
- skewy : Perubahan kemiringan vertikal
- translate : Pergeseran 2d
- translatex : Pergeseran berdasarkan sumbu x
- translatey : Pergeseran berdasarkan sumbu y
- translatez : Pergeseran berdasarkan sumbu z
- translate3d : Pergeseran 3d
- matrix : Versi singkat dari semua fungsi transformasi 2d
- matrix3d : Versi singkat dari semua fungsi transformasi 3d
- perspective : Jarak pandang dari sumbu Z. Kalian akan membutuhkannya saat menggunakan fungsi translate.
Properti transform bisa diubah titik asalnya dengan "transform-origin". Saat menggunakan rotasi atau perubahan ukuran, titik asal tersebut akan berperan sebagai titik pusat. Sebelum menggunakan transformasi, kalian sebaiknya mengatur nilai properti width, height, dan transform-origin.
Contoh kode HTML dari beberapa fungsi di atas bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
transform-origin:50% 50%;
}
#rotasi{
transform : rotate(10deg);
}
#skala{
transform : scale(1, 1.5);
}
#skew{
transform : skew(15deg, 10deg);
}
#geser{
transform : translate(24px, 25px);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<div id="rotasi">
<p>rotate</p>
</div><BR><HR>
<div id="skala">
<p>scale</p>
</div><BR><HR>
<div id="skew">
<p>skew</p>
</div><BR><HR>
<div id="geser">
<p>translate</p>
</div><BR>
</BODY>
</HTML>
Contoh di atas menggunakan transformasi 2 dimensi yang hanya menggunakan sumbu x dan sumbu y. Selain transformasi 2d, CSS juga menyediakan transformasi 3d dengan menggunakan sumbu z.
Saat kalian menggunakan transformasi 2d, kalian cukup menggunakan properti transform dan transform-origin. Tapi, saat kalian menggunakan transformasi 3d, ada beberapa properti lain yang kalian perlukan. Properti-properti yang bisa kalian gunakan bersama dengan transform adalah sebagai berikut.
- Transform-origin : Titik pusat atau acuan transformasi.
- Transform-style : Menentukan cara render tampilan descendant atau child element dalam nested element saat diberi efek transformasi. Nilainya bisa berupa flat, preserve-3d, initial, atau inherit. Nilainya bisa berupa flat, preserve3d, inherit, dan initial.
- Perspective : Menentukan jarak pandang atau perspektif.
- Perspective-origin : Menentukan acuan yang digunakan properti perspective.
- Backface-visibility. Menentukan apakah isi dari suatu elemen terlihat atau tidak saat posisinya terbalik. Nilainya bisa berupa visible, hidden, initial, atau inherit.
Rotate
Fungsi rotate merupakan salah satu fungsi yang digunakan untuk memutar elemen HTML besert isinya. Kalian juga bisa menggunakan rotateX, rotateY, rotateZ, dan rotate3D. Beda setiap fungsi rotasi ada di sumbu koordinat yang digunakan. Di antara semua fungsi tersebut, rotate3d adalah fungsi yang menggunakan ketiga sumbu koordinat untuk memutar elemen HTML. Kesamaan dari semua fungsi tersebut ada pada penggunaan satuan deg yang merupakan singkatan dari degree yang artinya derajat. Selain itu, kalian bisa menggunakan satuan rad (radian) dan turn (putaran).
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
transform-origin:50% 50% 0%;
}
#rotasi{
transform : rotate(45deg);
}
#rotatex{
transform : rotateX(45deg);
}
#rotatey{
transform : rotateY(45deg);
}
#rotatez{
transform : rotateZ(45deg);
}
#rotate3d{
transform:rotate3d(1, 0.5, 0.25, 30deg);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="rotasi">
<p>rotate</p>
</div><BR><HR>
<div id="rotatex">
<p>RotateX</p>
</div><BR><HR>
<div id="rotatey">
<p>RotateY</p>
</div><BR><HR>
<div id="rotatez">
<p>RotateZ</p>
</div><BR><HR>
<div id="rotate3d">
<p>Rotate3d</p>
</div><BR>
</BODY>
</HTML>
Fungsi rotasi selain rotate3d pusat rotasinya oleh nilai transform origin. Jika kalian penasaran, coba ubah sendiri nilai transform-origin. Nilai awal transform origin adalah "50% 50% 0" yang artinya, pusat putaran ada di tengah sumbu X dan Y dengan jarak 0 di sumbu Z.
Dua nilai pertama pada transform origin adalah pusat rotasi pada sumbu X dan sumbu Y. Kalian bisa memberi nilai center, left, right, persentase atau nilai dengan satuan panjang lainnya. Khusus untuk nilai ketiga yang mewakili jarak sumbu Z, kalian hanya bisa menggunakan nilai berupa panjang.
Transform3d menggunakan 4 parameter. Tiga parameter awal adalah vektor atau arah putaran yang bisa diberi nilai 0 hingga 1. Parameter keempat adalah sudut putar seperti pada fungsi rotasi lainnya.
Skew
Skew digunakan untuk membuat elemen beserta isinya terlihat condong. Fungsi skew digunakan untuk mengubah kemiringan berdasarkan sumbu x dan y. Jika kalian ingin mengubah kemiringan berdasarkan salah satu sumbu koordinat, kalian bisa menggunakan skewX atau skewY. Sama seperti rotasi, fungsi ini menggunakan satuan deg, rad, dan turn. Skew juga dipengaruhi fungsi transform origin. Bedanya, skew hanya bisa digunakan untuk bidang 2d.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
transform-origin:0% 0% 0%;
}
#skew{
transform : skew(15deg, 15deg);
}
#skewx{
transform : skewX(15deg);
}
#skewy{
transform : skewY(15deg);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="skew">
<p>Skew</p>
</div><BR><HR>
<div id="skewx">
<p>SkewX</p>
</div><BR><HR>
<div id="skewy">
<p>SkewY</p>
</div><BR><HR>
</BODY>
</HTML>
Translate
Translate digunakan untuk menentukan perpindahan elemen HTML dari posisi asalnya. Translate menggunakan nilai berupa angka dengan satuan panjang atau persentase. Sama seperti rotate, translate menyediakan versi 2d dan 3d. Kalian juga bisa menentukan pergeseran posisi berdasarkan salah satu sumbu saja dengan translateX, translateY, dan translateZ.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
}
#translate{
transform : translate(16mm, 8mm);
}
#translatex{
transform : translateX(4cm);
}
#translatey{
transform : translateY(90%);
}
#translatez{
transform : perspective(40px) translateZ(4px);
}
#translate3d{
transform : perspective(40px) translate3d(25%, 8px, 8cm);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="translate">
<p>Translate</p>
</div><BR><HR>
<div id="translatex">
<p>TranslateX</p>
</div><BR><HR>
<div id="translatey">
<p>TranslateY</p>
</div><BR><HR>
<div id="translatez">
<p>TranslateZ</p>
</div><BR><HR>
<div id="translate3d">
<p>scale3d</p>
</div><BR>
</BODY>
</HTML>
Ada fungsi khusus yang terkait dengan properti transform. Fungsi tersebut adalah perspective. Jika kalian ingin menggeser elemen HTML berdasarkan sumbuZ, kalian membutuhkan perspective untuk mengatur jarak pandang.
Scale
Fungsi scale digunakan untuk menentukan perubahan ukuran berdasarkan skala tertentu. Nilainya hanya berupa angka. Scale, Scalex, dan ScaleY digunakan untuk menentukan perubahan tinggi dan lebar berdasarkan nilai properti width, height, atau ukuran asli suatu elemen.
Selain perubahan ukuran berdasarkan sumbu x dan y, kalian juga bisa menentukan perubahan ukuran berdasarkan sumbu z dengan menggunakan properti scaleZ. Properti scaleZ memerlukan properti perspective atau fungsi perspective untuk menentukan jarak awal dari sumbu z sebelum ukuran diubah. Ukuran akan diperbesar atau diperkecil sekian kali lipat seperti saat kita menjauhi atau mendekati objek.
Properti scaleX, scaleY, dan scaleZ bisa dipersingkat penulisannya dengan menggunakan scale3d. Contoh penggunaan semua properti scale bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
transform-origin:0 0 0;
}
#scale{
transform : scale(0.5, 2);
}
#scalex{
transform : scaleX(2);
}
#scaley{
transform : scaleY(2);
}
#scalez{
transform : perspective(40px) scaleZ(4);
}
#scale3d{
transform:perspective(40px) scale3d(2, 2, 4);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="scale">
<p>Scale</p>
</div><BR><HR>
<div id="scalex">
<p>scaleX</p>
</div><BR><HR>
<div id="scaley">
<p>ScaleY</p>
</div><BR><HR>
<div id="scalez">
<p>scaleZ</p>
</div><BR><HR>
<div id="scale3d">
<p>scale3d</p>
</div><BR>
</BODY>
</HTML>
Seperti yang bisa kalian lihat, scaleZ atau scale3D tidak mengubah ketebalan elemen HTML. Fungsi-fungsi tersebut hanya memberikan efek perubahan ukuran tinggi dan lebar. Properti scaleZ dan translateZ memberikan efek yang hampir sama. Perbedaannya ada pada nilai yang diberikan. ScaleZ menggunakan "kelipatan" atau skala, sedangkan translateZ menggunakan jarak.
Matrix
Fungsi matrix bisa digunakan untuk mempersingkat penulisan scale, skew, dan translate. Selain menggunakan matrix, sebenarnya kalian juga bisa menggunakan beberapa fungsi yang dipisahkan dengan spasi sebagai nilai peoperti transform. Jika kalian ingin menggunakan matrix, pola penulisan parameternya adalah sebagai berikut.
- Transform : matrix(scaleX, SkewY, SkewX, scaleY, translateX, translateY).
Nilai-nilai pada matrix hanya menggunakan angka tanpa satuan dan punya perhitungan tersendiri. Itu mungkin akan membuat kalian bingung. Jika kalian tidak bisa memahami perhitungan pada matrix, lebih baik kalian menggunakan properti lain saja.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:40px;
width:200px;
background:yellow;
transform-origin:0 0 0;
}
#matrix2d{
transform:matrix(1.5, 0.5, 0.5, 2, 60, 60);
}
#properti_transform{
transform:scale(1.5, 2) skew(15deg, 15deg) translate(30px, 30px);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="matrix2d">
<p>matrix2d</p>
</div><BR><BR>
<div id="properti_transform">
<p>Transform</p>
</div><BR>
</BODY>
</HTML>
Matrix3d
Selain matrix untuk bidang 2d, kalian juga bisa menggunakan fungsi "matrix3d" yang menggunakan 16 parameter. 16 parameter tersebut mewakili matrix 4x4 yang digunakan untuk menentukan transformasi pada elemen HTML.
Sama seperti fungsi "matrix", parameter terakhir dari matrix3d digunakan untuk menentukan pergeseran atau translate. Tepatnya, ada 4 parameter yang terkait dengan translate. Keempat parameter tersebut mewakili koordinat x, y, z, dan w. 12 parameter awal digunakan untuk menentukan transformasi yang terkait dengan perubahan bentuk. Sama seperti versi 2d-nya, matrix3d hanya menggunakan angka tanpa satuan. Contoh penggunaan fungsi matrix3d bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
body>div{
height:200px;
width:200px;
background:yellow;
transform-origin:0 0 0;
}
#matrix3d{
transform:matrix3d(0.5, 0.2, 0, 0,
0.1, 1.2, 0, 0,
0, 0, 1, 0,
40, 20, 0, 1);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1><BR><BR><HR>
<div id="matrix3d">
<p>matrix3d</p>
</div>
</BODY>
</HTML>
Animasi dan Transformasi
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
@keyframes animasi{
from{
transform: rotate3d(0.5, 0.5, 0.5, 0deg);
}
to{
transform: rotate3d(0.5, 0.5, 0.5, 360deg);
}
}
body>section{
transform-style: preserve-3d;
transition: transform 1.5s;
margin: 50px 50px;
animation: animasi 2s normal linear infinite;
}
body>section>div{
height:100px;
width:100px;
position:absolute;
top:0;
left:0;
font-size:72;
display:flex;
justify-content:center;
align-items:center;
color:white;
backface-visibility:visible;
}
#depan{
background:RGBA(255, 0, 0, 0.7);
transform:translateZ(50px);
}
#belakang{
background:RGB(255, 255, 0.5);
transform:rotateY(180deg) translateZ(50px);
}
#bawah{
background:RGBA(0, 255, 0, 0.7);
transform:rotateX(-90deg) translateZ(50px);
}
#atas{
background:RGBA(0, 255, 255, 0.7);
transform:rotateX(-90deg) translateZ(50px);
}
#kanan{
background:RGBA(0, 255, 255, 0.7);
transform:rotateY(90deg) translateZ(50px);
}
#kiri{
background:RGBA(255, 0, 255, 0.7);
transform:rotateY(-90deg) translateZ(50px);
}
#matrix3d{
transform:matrix3d(0.5, 0.2, 0, 0,
0.1, 1.2, 0, 0,
0, 0, 1, 0,
40, 20, 0, 1);
}
</STYLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<section id="example-element" tabindex="0">
<div id="depan">1</div>
<div id="belakang">2</div>
<div id="kanan">3</div>
<div id="kiri">4</div>
<div id="atas">5</div>
<div id="bawah">6</div>
</section>
</BODY>
</HTML>
Contoh di atas menggunakan fungsi rotate dan translateZ untuk membentuk kubus. Setelah kubus terbentuk, kubus dianimasikan dengan rotate3d sehingga elemen HTMLnya terlihat memutar.
Selain transform, kalian memerlukan backface-visibility dan transform-style. Back-face visibility membuat isi elemen HTML bisa terlihat dari belakang saat elemen HTML diputar atau dibalik. Selain itu, kalian juga memerlukan transform-style.
Transform-style digunakan untuk membuat isi dari elemen HTML bisa dirender secara terpisah dengan ukuran dan posisinya masing-masing saat diberi transformasi 3d. Jika nilai transform-style bukan preserve3d, tampilannya mungkin akan sedikit berantakan atau ada yang tidak terlihat.