Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से इमेज को फ्लिप/मिरर इफेक्ट कैसे दें?


CSS से इमेज को फ्लिप करने का कोड निम्नलिखित है:

उदाहरण

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img:hover {    transform: scaleX(-1);    width: 400;    height: 400; } </style> </head> <body> <h1>Flipping an Image Example</h1> <img src="https://i.picsum.photos/id/551/400/400.jpg"> <h1>Hover over the above image to see it mirrored</h1> </body> </html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

CSS से इमेज को फ्लिप/मिरर इफेक्ट कैसे दें?

इमेज पर होवर करने पर यह नीचे दिखाए अनुसार मिरर होगी:

CSS से इमेज को फ्लिप/मिरर इफेक्ट कैसे दें?


  1. CSS से इमेज को फ्लिप/मिरर इफेक्ट कैसे दें? CSS से इमेज को फ्लिप/मिरर इफेक्ट कैसे दें?

    CSS से इमेज को फ्लिप करने का कोड निम्नलिखित है:उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img:hover {    transform: scaleX(-1);    width: 400;    heig

  1. CSS से इमेज पर बॉर्डर कैसे जोड़ें? CSS से इमेज पर बॉर्डर कैसे जोड़ें?

    CSS से इमेज पर बॉर्डर जोड़ने का कोड निम्नलिखित है:उदाहरण<!DOCTYPE html> <html> <head> <style> img {    border: 8px solid rgb(0, 238, 255);    width: 400px;    height: 400px; } </style> </head> <body> <h1>Border Around Imag

  1. CSS से इमेज पर बटन कैसे जोड़ें? CSS से इमेज पर बटन कैसे जोड़ें?

    CSS से इमेज पर बटन जोड़ने का कोड निम्नलिखित है:उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    width: 100%; } div {    position: relative;    width