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

قبلا مقالات بسیاری در رابطه با قدرت زبان CSS خصوصا در بخش تصاویر خدمت شما بروی سایت ارائه شده است اما امروز با یک مقاله دیگر در خدمت شما خواهیم بود تا ویژگی کاربردی دیگری از CSS را دربخش تصاویر خدمتتان به نمایش بگذاریم .

اگر مقاله ” فیلترهای کاربردی عکس در CSS ” را مطالعه کرده باشید و البته درمورد امکانات CSS در بخش فیلترها آشنایی داشته باشید ، اطلاع دارید که می‌توانیم با حفظ تمامیت تصویر ، به کمک فیلترها ، برای مثال یک عکس را درلحظه به نسخه سیاه و سفید تبدیل کنیم و نیازی به استفاده از فتوشاپ و … نیست .

ویژگی که امروز خدمتتان معرفی خواهد شد دررابطه با بخش transform است که قطعا در CSS3 بسیار با آن روبرو شده‌اید . یکی از ویژگی‌های کاربردی در قسمت transform ، قسمت scale است که مسبب بزرگنمایی افقی ، عمودی یا کلی خواهد بود . اکنون قصد داریم تا از scale به روشی جدیدتر استفاده کنیم ، برای برعکس کردن تصاویر !

معکوس کردن تصویر در محور X

معمولا اصلی‌ترین حالت برای معکوس کردن تصویر ، معکوس کردن آن در محور X است . تصویر زیر را بعنوان نمونه اصلی درنظر داشته باشید که قصد داریم تا آن را برعکس کنیم :

اکنون برای اینکه این تصویر در محور X برعکس شده یا اصطلاحا Flip یا Reverse شود ، باید دستور زیر را به تصویر خود اضافه کنید :

img.hoves {
  transform: scaleX(-1);
}

اکنون با این دستور ، خروجی تصویر شما بصورت زیر خواهد بود که کاملا توسط CSS در محور X برعکس شده است .

این دستور را شاید تاکنون با مقادیری همچون 1.2 یا 1.5 استفاده کرده باشید تا زوم تصویر را در مواقعی همچون hover و … بیشتر کنید اما اکنون شاهد هستید که توسط این دستور ، تصویر ما کاملا در محور X برعکس شده است .

معکوس کردن تصویر در محور Y

اکنون برای اینکه همین تصویر اصلی را در محور Y یا همان حالت عمودی برعکس کنیم ، باید از یک دستور ساده دیگر استفاده کنیم . این دستور بصورت زیر است :

img.hoves { transform: scaleY(-1); }

اکنون خروجی تصویر را بصورت زیر مشاهده می‌کنید که می‌توانید در برخی طراحی‌ها درصورت نیاز به برعکس کردن لوگو و … بسادگی استفاده کنید .

خب اکنون تنها کافیست تا یک مثال دیگر از این دستورات را خدمتتان معرفی کنیم که احتمال دارد در برخی طراحی‌ها مورد استفاده قرار گیرد .

معکوس کردن تصویر در محور X و Y

اکنون برای اینکه تصویر را همزمان هم در محور X و هم در محور Y بصورت همزمان معکوس کنیم ، کافیست تا از دستور زیر استفاده کنیم که همزمان هم محور X و هم محور Y را درگیر دستور خواهد کرد :

img.hoves { transform: scale(-1,-1); }

اکنون خروجی زیر را مشاهده خواهید کرد :

شاهد هستید که تمامی این تغییرات را صرفا با CSS و یک خط دستور روی تصاویر اعمال کردیم و لذا یک آموزش بسیار خوب را در این بخش یاد گرفتید که می‌توانید بسادگی ، هرزمانی که به معکوس کردن تصویری داخل طراحی خود نیاز داشتید ، صرفا با 3 دستور که خدمت شما آموزش دادیم و پرکاربردترین آن دستور قسمت X است ، بسادگی این کار را انجام دهید . امیدواریم این مقاله کوتاه از سلسله آموزش‌های CSS برای شما مفید واقع شود . پاینده باشید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا