Tutorial Pemrograman

Cara Memutar / Rotate Gambar dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Kamu bisa melakukan rotate image (putaran gambar) yang ada di dalam website dengan menggunakan kode script yakni CSS. Rotate image ini biasanya dilakukan pada website yang bertema game edukasi, media pembelajaran interaktif, animasi suatu objek, dan lain-lain. Penulis akan memberikan tutorial cara rotate image dengan CSS. Jadi, kamu bisa melakukan perputaran gambar tersebut ke arah manapun yang kamu inginkan pada tampilan website kamu.

Berikut cara rotate image dengan CSS.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “rotate-img-css.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

7. Berikut hasilnya.

Selesai.

Catatan :

Pada kode script di bawah ini.

Terkadang, ada beberapa kode script CSS tersebut tidak didukung pada beberapa web browser tertentu sehingga pada saat file html dijalankan di web browser itu tidak bekerja dengan baik. Sebaiknya, kamu tambahkan kode script yang tadi ke dalam website kamu.

Demikian tutorial cara rotate image dengan CSS. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial Inwepo melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top