התייחסות לאמלמנט לאחר היפוך/סיבוב

[ש.ב.ח.]

שלום וברכה
הפכתי טקסט עם CSS כך שהוא עכשיו 90 מעלות
כמו כן המיקום שלו הוא יחסי להורה

    position: absolute;

עכשיו אני מעניין להזיז אותו מעל /מתחת להורה ושיהיה במרכז ההורה(רוחב)
הבעיה שכל ההתיחסות של CSS לאחר ההיפוך נשאר כאילו האלמנט עדין שוכב
והמיקומים במקרה כזה שונים מטקסט ארוך לקצר באופן משמעותי...

איך אפשר להתייחס למיקום (top,right,left,buttom) למצבו הנוכחי?

[dovid]

@ש-ב-ח יש מצב לדמו קטן?
https://codepen.io/pen/
https://jsfiddle.net/
https://next.plnkr.co/edit/?open=lib%2Fscript.js

[ש.ב.ח.]

@dovid
אולי תסביר לי אחת ולתמיד איך פותחים שם פרויקט בלי ששם המשתמש שלי יופיע בurl...

[dovid]

@ש-ב-ח אמר בהתייחסות לאמלמנט לאחר היפוך/סיבוב:

@dovid
אולי תסביר לי אחת ולתמיד איך פותחים שם פרויקט בלי ששם המשתמש שלי יופיע בurl...

א. תפתח משתמש חדש ותחשוב פעמיים מה השם שאתה בוחר לעצמך
ב. תשתמש כאורח ע"י התנתקות או ע"י גלישה בסתר
ג. תוותר על החשאיות שלך לטובת התכלס

[zvizvi]

@ש-ב-ח אמר בהתייחסות לאמלמנט לאחר היפוך/סיבוב:

שלום וברכה
הפכתי טקסט עם CSS כך שהוא עכשיו 90 מעלות
כמו כן המיקום שלו הוא יחסי להורה

    position: absolute;

עכשיו אני מעניין להזיז אותו מעל /מתחת להורה ושיהיה במרכז ההורה(רוחב)
הבעיה שכל ההתיחסות של CSS לאחר ההיפוך נשאר כאילו האלמנט עדין שוכב
והמיקומים במקרה כזה שונים מטקסט ארוך לקצר באופן משמעותי...

איך אפשר להתייחס למיקום (top,right,left,buttom) למצבו הנוכחי?

יש הבדל מהותי בין position (absolute, relative) וכד' לבין transform:

הפקודות של position משנות את המיקום האמיתי של האלמנט,
לעומת זאת ב transform המיקום (לצורך רינדור הדף) ממשיך להיות המיקום המקורי, והאלמנט רק מוצג בפועל במקום אחר לפי ההגדרה.

יש לזה יתרונות למשל באנימציות, כאשר משתמשים בtransform חוסכים רינדור מחודש בכל תזוזה של האנימציה, דבר שיכול להעמיס מאוד על הדף אם היו משתמשים בposition.

מצד שני כאשר רוצים להזיז את המיקום האמיתי שאליו הדף יתייחס עבור האלמנט, ושהמרווחים יתייחסו למיקום החדש, יש להשתמש בposition.

(זה מסביר למה קיים כפל פקודות position relative, ו transform translate )

[ש.ב.ח.]

@dovid אמר בהתייחסות לאמלמנט לאחר היפוך/סיבוב:

ג. תוותר על החשאיות שלך לטובת התכלס

הלכתי על זה

https://codepen.io/sbc640964/pen/wvvqKmo

[yossiz]

@ש-ב-ח אולי לך על writing-mode: vertical-rl במקום transform (שהוא בעייתי במקרה כזה כמו ש@zvizvi הסביר בטוב טעם).

[ש.ב.ח.]

@yossiz
ממש ממש תודה רבה,
כבר חודשים אני מחפש תשובה, לא הכרתי את האפשרות הזאת, שוב תודה.