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