Cara menggunakan css translatex animation

Dalam tutorial kali ini kita akan membahas salah satu fitur dari CSS3 yaitu transform, dengan menggunakan transform teman – teman dapat merubah dari tampilan sebuah objek, seperti memutar objek(rotate), memperbesar ukuran(scale), dan skew dan beberapa fitur lainnya

Table of Contents Show

CSS3 Transform
Translate()
Apa itu Animation CSS?
Apa itu @keyframes pada CSS?
Apa itu translate CSS?
Apa fungsi transform pada CSS?

Pengembangannya nanti anda dapat membuat animasi dari objek dengan menggunakan perpaduan fitur CSS yaitu transform dan animation.

CSS3 Transform

Nah kita akan bahas terlebih dahulu beberapa hal yang bisa anda gunakan pada perintah transform, antara lain :

Translate()

translate digunakan untuk memindahkan dari sebuah element, anda dapat menentukan posisi dari perpindahan dengan memberikan nilai pada parameter x untuk jarak kesamping (secara horizontal) dan parameter y sebagai jarak tingginya (secara vertical)

scale()

scale digunakan untuk memperbesar atau memperkecil dari ukuran sebuah objek.

skewX()

skewX digunakan untuk memiringkan element dengan mengatur nilai pada sumbu x (horizontal)

skewY()

skewY digunakan untuk memiringkan element dengan mengatur nilai pada sumbu y (vertical)

Rotate()

digunakan untuk memutar sebuah objek, anda dapat mengatur nilai dari perputarannya, dengan satuan derajat.

Matrix()

digunakan untuk menggabungkan beberapa perintah sekaligus yang ada didalam perintah transform seperti rotate(), skew(),scale(), sehingga perintah dari transform dapat ditampilkan sekaligus.

Baik untuk belajar mengenai skrip transform, kita akan pelajari contohnya satu persatu.

Translate()

Seperti penjelasan dibagian awal, translate digunakan untuk merubah posisi dari sebuah objek, untuk perintah yang bisa anda tuliskan adalah seperti berikut ini :

translate(nilai_jarak_samping_horizontal, nilai_jarak_atas_vertical)

untuk contoh skripnya adalah seperti berikut :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS Transform</title>

.kotak_1{

background: salmon;

float: left;

width: 150px;

height: 150px;

}

.kotak_2{

background: cyan;

float: left;

width: 150px;

height: 150px;

-ms-transform: translate(50px,400px); /* Internet Explorer 9 */

-webkit-transform: translate(50px,400px); /* Safari */

transform: translate(50px,400px); /* Syntax Standart */

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - translate</h1>

Ini adalah kotak 1. kotak ini tidak di berikan method translate

</div>

Ini adalah kotak 2. ini contoh fungsi translate() CSS Transform.

</div>

</body>

</html>

Semisal kita simpan dengan nama transform-translate.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

Pada kotak 1 yang berwarna merah dan berwarna biru harusnya bersebelahan, karena kita tidak menset bagian margin pada 2 objek tersebut.
Posisi dari kotak 2 yang berwarna biru berpindah dengan posisi 50 pixel kearah kanan, dan 400 pixel kearah bawah karena kita menset translate(50px,400px)

Scale()

Perintah scale digunakan untuk merubah ukuran dari objek, baik itu diperbesar ataupun diperkecil, untuk perintahnya adalah seperti berikut ini :

scale(perkalian_dari_nilai_lebar,perkalian_dari_nilai_tinggi)

Untuk contoh dari penggunaan skrip adalah seperti berikut ini :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS Scale</title>

.kotak_1{

background: salmon;

width: 100px;

height: 100px;

margin:100px;

}

.kotak_2{

background: cyan;

width: 100px;

height: 100px;

margin:100px;

-ms-transform: scale(2, 2); /* IE 9 */

-webkit-transform: scale(2, 2); /* Safari */

transform: scale(2, 2);

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - scale</h1>

kotak 1

</div>

kotak 2

</div>

</body>

</html>

Semisal kita simpan dengan nama transform-scale.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

Pada kotak pertama yang berwarna merah kotak ditampilkan dengan ukuran sesungguhnya yaitu 100 pixel untuk lebar, dan 100 pixel untuk tinggi.
Pada kotak kedua yang berwarna biru kotak ditampilkan dengan ukuran 2 kali lipat untuk lebar, dan 2 kali lipat untuk tinggi, karena kita menggunakan perintah scale(2,2)

SkewX()

Digunakan untuk memiringkan objek berdasarkan sumbu X (Horizontal), untuk perintahnya adalah seperti berikut ini :

skewX(nilai kemiringan)

Untuk contoh skrip adalah sebagai berikut ini :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS Skewx</title>

.kotak_1{

background: salmon;

width: 400px;

height: 100px;

margin-left: 200px;

}

.kotak_2{

background: cyan;

width: 400px;

height: 100px;

margin-left: 200px;

-ms-transform: skewX(50deg); /* IE 9 */

-webkit-transform: skewX(50deg); /* Safari */

transform: skewX(50deg); /* Standard syntax */

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - skewx</h1>

kotak 1

</div>

kotak 2

</div>

</body>

</html>

Semisal kita simpan dengan nama trasnform-skewX.html, lalu kita buka dibrowser maka hasilnya adalah :

Keterangan :

Kotak 1 ditampilkan dengan tampilan normal
Kotak 2 untuk tampilannya miring karena kita memberikan nilai skewx sebesar 50deg, sehingga miring sebear 50 derajat.

SkewY()

Digunakan untuk memiringkan objek berdasarkan sumbu Y (Vertical), untuk perintahnya adalah seperti berikut ini :

skewY(nilai kemiringan)

Untuk Contoh Skripnya adalah seperti berikut ini :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS SkewY</title>

.kotak_1{

background: salmon;

width: 400px;

height: 100px;

margin-left: 200px;

}

.kotak_2{

background: cyan;

width: 400px;

height: 100px;

margin-left: 200px;

-ms-transform: skewY(10deg); /* IE 9 */

-webkit-transform: skewY(10deg); /* Safari */

transform: skewY(10deg); /* Standard syntax */

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - skewY</h1>

kotak 1

</div>

kotak 2

</div>

</body>

</html>

Semisal kita simpan dengan nama skewY.html lalu kita buka di browser :

Keterangan :

Kotak 1 ditampilkan dengan sebagaimana mestinya
Kotak 2 kita berikan nilai skewY(10deg) yang membuat kotak 2 memiliki kemiringan sebanyak 10 derajat secara vertical.

Rotate()

Property transform ini digunakan untuk melakukan perputaran pada objek dipilih, untuk perintah rotate adalah seperti berikut ini :

rotate(nilai rotasi)

Untuk contoh penggunaan skripnya adalah seperti berikut ini :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS Rotate</title>

.kotak_1{

background: salmon;

width: 200px;

height: 100px;

margin-left: 200px;

}

.kotak_2{

background: cyan;

width: 200px;

height: 100px;

margin-left: 200px;

-ms-transform: rotate(90deg); /* IE 9 */

-webkit-transform: rotate(90deg); /* Safari */

transform: rotate(90deg);

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - Rotate</h1>

kotak 1

</div>

kotak 2

</div>

</body>

</html>

Semisal kita simpan dengan nama rotate.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

Kotak 1 ditampilkan dengan tampilan normal
Kotak 2 ditampilkan dengan memutar 90 Derajat karena kita memberikan property rotate(90deg) sehingga objek berputar 90 derajat.

Matrix()

Perintah matrix ini digunakan untuk memberikan beberapa perintah transform sekaligus, sehingga anda tidak perlu menuliskannya satu persatu, untuk perintahnya adalah seperti berikut ini :

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Untuk Contoh dari penggunaan skrip matrix adalah sebagai berikut ini :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial CSS Matrix</title>

.kotak_1{

background: salmon;

width: 200px;

height: 100px;

margin-left: 200px;

}

.kotak_2{

background: cyan;

width: 200px;

height: 100px;

margin-left: 200px;

transform: matrix(1, 0, 2, 2, 0, 0);

}

</style>

</head>

<body>

<h1>Tutorial CSS Transform - Matrix</h1>

kotak 1

</div>

kotak 2

</div>

</body>

</html>

Semisal kita simpan dengan nama matrix.html, lalu kita buka di browser maka hasilnya adalah

Keterangan :

Kotak pertama ditampilkan dengan tampilan normal.
Kotak kedua ditampilkan dengan tampilan scaleX 1 sehingga perbesaran objeknya secara sumbu x adalah 1x berikutnya skewX 2 sehingga kemiringan objek sebesar 2 derajat berikutnya, scaleY 2 sehingga perbesaran objeknya secara sumbu y adalah 2 kali.

Jadi kurang lebih seperti itu teman – teman untuk tutorial mengenai transform di CSS3 anda dapat merubah tampilan dari web dengan menggunakan beberapa property yang ada pada transform ini.

Apa itu Animation CSS?

Animasi CSS memungkinkan elemen web untuk bertransisi dari satu konfigurasi gaya CSS ke yang lain. Browser dapat memulai animasi yang telah ditentukan saat dimuat, namun animasi CSS yang dipicu peristiwa bergantung pada penambahan dan penghapusan kelas.

Apa itu @keyframes pada CSS?

@keyframes merupakan aturan dari animasi CSS untuk melakukan suatu pergerakan atau perubahan elemen. Dengan adanya animasi pada CSS membuat kita bisa dengan mudah dalam mengatur dan membuat suatu pergerakan atau perubahan elemen. Nama dari animasi yang dibuat, yang diletakkan setelah @keyframes.

Apa itu translate CSS?

translate() adalah fungsi yang bisa di gunakan untuk memindahkan sebuah element. kita bisa menentukan posisi nye dengan memberikan niai pada parameter x untuk jarak samping dan parameter y untuk jarak tingginya.

Apa fungsi transform pada CSS?

Ya, kita akan belajar fungsi text-transform pada CSS. Apa fungsi text-transform itu ?, fungsinya adalah untuk memanipulasi teks pada HTML. Contoh sederhananya adalah apabila kalian mempunyai paragraf dengan menggunakan huruf kecil semua, lalu tiba-tiba ingin dirubah menjadi huruf besar semua.