CSS rotate adalah salah satu properti yang digunakan untuk mengubah sudut rotasi elemen HTML. Dengan properti ini, Anda dapat memutar elemen seperti teks, gambar, atau bahkan elemen lainnya di sekitarnya. Properti ini sering digunakan bersama dengan transformasi CSS lainnya, seperti translate, scale, dan skew, untuk menciptakan efek-efek visual yang kompleks. Kita mulai belajar css kalini dengan topik animasi.
Daftar Isi
Cara Penerapan CSS Rotate pada HMTL
Anda dapat menggunakan CSS rotate bersama dengan animasi CSS untuk membuat elemen-elemen dalam halaman web Anda berputar atau melakukan animasi rotasi. Animasi CSS memungkinkan Anda mengendalikan perubahan nilai properti CSS seiring waktu, termasuk rotasi elemen. Berikut adalah cara Anda dapat menggabungkan keduanya.
Baca juga: Cara memperbaiki Error establishing a database connection wordpress
1. Menyiapkan elemen HTML
Siapkan gambar yang anda miliki jika tidak punya silahkan cari di situs penyedia gambar gratis seperti pixabay.
<div class="container">
<img src="disc1.png" class="rotasi-img" alt="">
</div>
2. CSS untuk Rotasi
Dalam contoh di css ini, kita akan mengatur gambar berputar searah jarum jam dari 0 hingga 360 derajat setiap 4 detik.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* set container full layar */
}
.rotasi-img {
width: 300px;
height: 300px;
border: 20px solid rgb(118, 1, 161);
border-radius: 50%; /* set border radius to 50% */
animation: rotasikan-gambar 4s linear infinite ;
}
3. Animasi otomatis
Gunakan properti CSS animation untuk me rotasi-img, membuatnya berputar, Sobat akan menggunakan properti rotate bersama dengan animasi CSS. ID rotasikan-gambar akan berputar 180 derajat dan kita set waktu 4 detik.
@keyframes rotasikan-gambar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Sobat CSS dapat menyesuaikan nilai-nilai seperti sudut rotasi, durasi animasi, dan jenis animasi sesuai dengan kebutuhan Anda. Ini hanya adalah contoh dasar bagaimana kalian dapat menggunakan rotate dalam animasi CSS untuk membuat rotasi-img berputar .
Video Selengkapnya cara Belajar Membuat animasi berputar dengan CSS
Baca Juga: cara instal wordpress di xampp
Agar bisa dipraktekkan berikut video hasil akhir dan panduannya untuk mengatur animasi pada rotate CSS nya.
Belajar CSS HTML Hasil Akhir:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* set container full layar */
}
.rotasi-img {
width: 300px;
height: 300px;
border: 20px solid rgb(118, 1, 161);
border-radius: 50%; /* set border radius to 50% */
animation: rotasikan-gambar 4s linear infinite ;
}
@keyframes rotasikan-gambar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<img src="disc1.png" class="rotasi-img" alt="">
</div>
</body>
</html>
Akhir Kata terkait Belajar CSS dan HTML
Pada contoh diatas sobat dapat menyesuaikan nilai-nilai seperti sudut rotasi, durasi animasi, dan jenis animasi sesuai dengan kebutuhan Anda. pada postingan ini hanya contoh dasar dalam belajar CSS bagaimana kita dapat menggunakan rotate dalam animasi CSS untuk membuat elemen berputar dalam desain web yang kita miliki.
