Membuat efek Mirror dengan HTML CSS

Hallo teman-teman, pada kesempatan kali ini saya akn memberikan sebuah trik sederhana yang bisa kalian gunakan untuk membuat desain tertentu. Seperti pada judul diatas, efek yang kita buat adalah efek cermin, atau refleksi. efek refleksi ini memanfaatkan dua objek yang bentuknya serupa, dan memanipulasi salah satu objek sehingga terlihat terbalik.

berikut adalah cara sederhana untuk membuat efek cermin tersebut.

Pertama kita akan buat tulisan Dumet seperti berikut:

Selanjutnya kita akan membuat cssnya seperti berikut

 

Padacss diatas kita meggunakan property transform, property transform ini sangat berguna untuk memanipulasi objek agar dapat disesuaikan dengan efek yang sangat bermacam-macam.

Disini kita menggunakan rotateY() untuk memutar objek secara horizontal sehingga akan membentuk objek seperti cermin.

Berikut ini adalah hasilnya dari html diatas

 

Untuk informasi saja bahwa selain rotateY, ada juga fingsi rotateX, rotate, dan rotateZ. untuk lebih jelasnya kalian coba saja sendiri agar lebih dapat dimengerti.

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat efek cermin menggunakan html css dengan mudah, semoga bermanfaat. Terima kasih

26 Januari 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat