Dalam pembuatan website terdapat banyak sekali sintak atau kode-kode yang harus dikuasai karena dengan begitu kita akan mudah dalam menyelesaikan tampilan website, khusus pada artikel ini saya akan bahas sintak dari CSS3 yaitu transisi. Kita tahu bahwa transisi merupakan sebuah fungsi untuk menjalankan perpindahan nilai suatu objek dari satu titik ke titik lainnya. Berikut ini adalah contoh bagaimana Cara Membuat Transisi Galeri Gambar dengan CSS3.Pada contoh ini saya kombinasikan transisi dengan rotasi pada gambarnya, sebelum memulai praktek, ada bahan-bahan yang harus disiapkan terlebih dahulu sebagai objek untuk demo nya, kalian siapkan beberapa gambar bebas.
Kalau sudah, berikut sintak HTML untuk membuat struktur dan menampilkan gambar nya terlebih dahulu.
<div class="wraper"> <img src="https://goo.gl/wrWhg3"> <img src="https://goo.gl/krx9mu"> <img src="https://goo.gl/aDKyBE"> </div>
Pada sintak img src silahkan masukan gambar nya, kemudian langkah selanjutnya barulah kita akan desain tampilan transisi galeri gambar dengan CSS3 berikut sintak nya.
div.wraper {
height: 356px;
width: 700px;
margin: 2rem auto 0;
position: relative;
}
div.wraper img {
position: absolute;
left: 200px;
width: 300px;
height: 200px;
border: 12px solid #ffe;
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
transform-origin: center 400px;
transition: all .6s linear;
}
div.wraper img:first-child {
transform: rotate(5deg);
}
div.wraper img:last-child {
transform: rotate(-5deg);
}
div.wraper:hover img:first-child {
transform: rotate(25deg);
}
div.wraper:hover img:last-child {
transform: rotate(-25deg);
}
Pada sintak diatas bisa kita lihat kode :
transition: all .6s linear;
sintak ini adalah fungsi utama dari perpindahan objek gambar dari satu titik ke titik akhir kemudian dikombinasikan dengan kode berikut.
transform: rotate(5deg);
untuk menjadikan gambar merotasi sesuai dengan nilai yang sudah ditentukan. Nah setelah semua kode diatas diketikan silahkan simpan file nya kemudian kalian jalankan pada browser masing-masing dan lihat hasil nya. Selesai
Baik itulah tadi salah satu pengaplikasian properti CSS3 yakni transisi dalam tampilan website, sekian pembahasan mengenai Cara Membuat Transisi Galeri Gambar dengan CSS3 kali ini. Selamat mencoba 🙂