قرینه کردن تصاویر وب سایت با استفاده از CSS

شما میتوانید با استفاده از کدهای CSS تصاویر نشان داده شده در وب سایت خود را به صورت بر عکس و قرینه نشان دهید. فرض کنید در محلی از صفحه وب سایت خود تصویر فِلشی که به سمت راست اشاره می کند دارید. دیگر نیازی نیست برای نشان دادن فلشی به سمت چپ یک تصویر به حجم وبسایت خود اضافه کنید. کافیست با استفاده از این تکنیک تصویر موجود را قرینه کنید. همچنین متوانید تصاویر متنی، دکمه ها، تصاویر پس زمینه و ... در وب سایت خود را توسط این روش در جهت مخالف نمایش دهید.

برای این منظور کافیست تکه کد css زیر را برا روی تصویر ممورد نظر خود اعمال نمائید:

img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

به عنوان نمونه نتیجه اعمال دستور فوق بر روی لوگوی وبسایتها به صورت زیر است:


حالت عادی :

وبسایتها

حالت قرینه :

وبسایتها

نظرات (4) -

  • زهرا

    10/03/1393 08:52:54 ق.ظ | پاسخ به این نظر

    سلام اقای میرزایی من واقعا ممنونم اسم شمارو گذاشتم لینک اولم چونکه توی کل گوگل یه همچین وبسایت عالی ای پیدانکردم واقعا ازتون ممنونم وامیدوارم موفق باشید

  • طراحی سایت

    06/02/1394 05:11:28 ب.ظ | پاسخ به این نظر

    سلام و خسته نباشید و آرزوی موفقیت

  • جوملا نویس

    06/04/1394 11:35:24 ق.ظ | پاسخ به این نظر

    سلام.
    لوگوی خودتون وقتی روش میری برعکس میشه ولی دوباره وبسایتها رو بصورت صحیح نشون میده.
    این کار رو چجوری انجام بدم؟

Loading