برعکس کردن تصاویر با 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



© هرگونه کپی برداری از مطالب و قالب از لحاظ شرعی و قانونی غیر مجاز می باشد