آموزش نحوه چرخاندن یک تصویر با CSS

در این مقاله می آموزید که چطور با استفاده از CSS و Html یک تصویر را flip(برگردان جانبی) کنید ( به آن افکت آینه ای اضافه کنید )

نکته :  این مثال بر روی تبلت ها یا موبایل ها کار نمیکند .

<h2>Flip an Image</h2>

<p>ماوس خود را بر روی تصویر حرکت دهید</p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" alt="Paris" width="400" height="300">

 

خروجی Flip an Image  

Flip سه بعدی تصویر با استفاده از متن

بیاموزید که چطور یک flip سه بعدی در تصویر با متن ایجاد کنید .

قدم اول : کد HTML را اضافه کنید.
مثال :

از ویژگی border-radiusاستفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از عدد 50% ، تصویر را به شکل دایره ایجاد میکند.

Flip an Image
ماوس خود را بر روی تصویر حرکت دهید


                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

مولفه های height و width را مطابق یکدیگر تنظیم کنید تا تصویر درست به نظر بیاید و از ویژگی border-radius استفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از 50% باعث میشود تصویر به شکل دایره نمایش داده شود

img {
  border-radius: 50%;
}

                

<h1>Image Flip with Text</h1>

<h3>نشانگر ماوس را روی تصویر ببرید</h3>

<div class="flip-box">

  <div class="flip-box-inner">

    <div class="flip-box-front">

      <img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" alt="Paris" style="width:300px;height:200px">

    </div>

    <div class="flip-box-back">

      <h2>Paris</h2>

      <p>What an amazing city</p>

    </div>

  </div>

</div>

خروجی Image Flip with Text