Fungsi Rotate pada Transform CSS

Hallo teman-teman balik lagi pada tutorial dumet school, pada tutorial kali ini saya akan membahas fungsi rotate pada transform css.

Fungsi dari transform rotate pada adalah untuk memutar suatu element sesuai dengan perputaran yang kita inginkan, rotate mempunyai satuan deg atau degree, nah mungkin untuk lebih jelasnya kita langsung saja praktekan, sekarang silahkan teman-teman buat file html dan ketikan script berikut:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div></div>

</body>
</html>

Nah saya membuat sebuah div didalam tag body, div inilah yang nanti akan kita putar dengan menggunakan transform rotate, sekarang save lalu coba tambahkan script css berikut :

div {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin-top:40px;
    transform:rotate(40deg);
}
</style>

Sehingga kelengkapan script nya adalah seperti berikut :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin-top:40px;
    transform:rotate(40deg);
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Sehingga jika di save maka hasilnya akan seperti berikut :

Gimana teman-teman cukup mudah bukan? silakan praktekan masing masing, cukup sekian dulu tutorial kali ini, semoga bermanfaat.

Terimakasih.

Kategori