שלום כולם,
לא פעם אנו נתקלים בצורך להפוך תמונה בהיפוך ראי באתר שאנחנו בונים,
לדוגמא סימון וי check_mark-en יראה כך בשימוש בשפה האנגלית, אבל בעברית נצטרך לשנות את הכיוון שלו לזה check_mark-en

נכון ניתן לעלות את התמונה הפוכה ולהשתמש בה, אבל כאן נסביר כיצד באמצעות שורת קוד קטנה נוכל להפוך את התמונה דרך הקוד,
ראשית אם אנחנו עובדים על אתר עם כמה שפות, לדוגמא עברית ואנגלית, את השינויים לשפה העברית נבצע בקובץ rtl.css ואת האנגלית נשנה ב- style.css.

לצורך ההדגמא אנו נבצע הפיכה של הלוגו שלנו, ומאחר ומדובר על אתר בעברית נכניס את הקוד ל- rtl.css
ראשית נשתול אותו בדף

<img src="/wp-content/uploads/2014/11/israeli_academy_logo2.png" alt="Academy Logo" />

מה שיתן לנו את זה:
Academy Logo

כעת נכניס לקוד HTML של התמונה את class שנוכל להפוך את התמונה דרך ה- CSS, לדוגמא נוסיף לקוד את זה

class="flipimage"

מה שיתן לנו את הקוד הבא

<img src="/wp-content/uploads/2014/11/israeli_academy_logo2.png" alt="Academy Logo" class="flipimage" />

כעת ניגש לקובץ rtl.css ונוסיף את הקוד הבא

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

נשמור את הכל וברגע שנעשה ריפרש לדף נוכל לראות כי התמונה אכן התהפכה
Academy Logo

וזה הכל, דיי פשוט.
ומעתה לא תצטרכו להשתמש בתמונות כפולות לאתר שלכם.

בהצלחה,
גיא

תגובות

הגיבו

אין תגובות

השאירו תגובה

19 − 6 =