Assalamua'alaikum wr.wb.
A. Pengertian
Menurut W3Schools, sebuah transformasi adalah efek yang memungkinkan unsur bentuk perubahan, ukuran dan posisi.
B. Latar Belakang
Latar belakang dari penggunaan transform ini dalam HTML atau pembuatan desain web digunakan untuk membuat efek berubah posisi, dan bisa berupa 2D dan 3D.
C. Alat dan Bahan
- Sublime Text (TextEditor)
- Laptop
- OS XUbuntu 16.04
- W3Schools Offline/ online
D. Tujuan
Bertujuan untuk mengetahui dan mempraktekkan hasil pengetahuan yang dipelajari serta didapat digunakan untuk tambahan di dalam pembuatan sebuah tampilan web.
E. Tahap Pelaksanaan
Metode transformasi 2D berikut:
- translate() : Metode bergerak elemen dari posisi saat ini (sesuai dengan parameter yang diberikan untuk sumbu X dan Y-axis).
- rotate() : Metode berputar sebuah searah jarum jam unsur atau berlawanan arah jarum jam sesuai dengan tingkat tertentu.
- scale() : metode meningkatkan atau mengurangi ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi).
- skewX() : Metode skews elemen sepanjang sumbu X dengan sudut tertentu.
- skewY() : Metode skews elemen di sepanjang sumbu Y dengan sudut tertentu.
- skew() : Metode skews elemen sepanjang X dan Y-axis dengan sudut tertentu.
- matrix() : Metode menggabungkan semua 2D transformasi metode menjadi satu.
1. Buka Sublime Text di Menu -> ketikkan Sublimetext.
2. Yang pertama kita akan membuat transform 2D yaitu masukkan coding seperti dibawah ini. Simpan dengan nama transform.html.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div>
This a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>
</body>
</html>
3. Buka tempat dimana file tersebut disimpan dan tekan enter akan muncul ke web browser.
4. Kedua kita akan membuat transform 3D.
Metode transformasi 3D berikut:
- rotateX() : Metode berputar elemen di sekitar X-sumbunya.
- rotateY() : Metode berputar elemen sekitar nya Y-axis.
- rotateZ() : Metode berputar elemen sekitar Z-sumbu pada derajat.
5. Dibawah ini merupakan contoh penggunaan transform 3D dengan rotate Z.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
The rotateZ() method rotates an element around its Z-axis at a given degree. This div element is rotated 90 degrees.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>
6. Dan hasilnya seperti dibawah ini.
F. Kesimpulan
Dari pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan transform dibagi atas 2 yaitu transform 2D dan transform 3D. Penggunaan dari transform tidak lah terlalu sulit. Kita bisa menggunakannya untuk animasi.
G. Referensi
- https://www.w3schools.com/css/css3_2dtransforms.asp
Sekian dan Terimakasih.
SMK Bisa !!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar