پرینت

برعکس کردن تصاویر با CSS

یکی از قابلیت های Transform CSS اینکه می توانید باهاش یک شی را در صفحه برعکس کنید یا مثلا بچرخانید. اما یکی از قابلیت های پر کاربرد مخصوصا برای ما طراحان فارسی زبان ها که پوسته های راست چین طراحی می کنیم برعکس کردن تصاویر و مخصوصا آیکون ها است. برای مثال در توییتر فارسی آیکون Favorite برعکس نشده (تا زمان نوشتن این مطلب) که در تصویر بخش چپ مشخص است. ما به کمک فایرباگ کلاس این آیکون را پیدا کرده و با استفاده از Transform آن را Flip کردیم. نتیجه در بخش راست تصویر مشخص است.

برعکس کردن تصویر

اگر می خواهید کد سی اس اسی که برای برعکس کردن تصویر می نویسید توی تمام مرورگرها کار کند می توانید از کد زیر استفاده نمایید.
-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";

SecImgSes