หมุนและแปล

ฉันมีปัญหาในการหมุนและวางตำแหน่งบรรทัดข้อความ ตอนนี้เป็นเพียงตำแหน่งที่ทำงาน การหมุนยังใช้งานได้ แต่ถ้าฉันปิดใช้งานการกำหนดตำแหน่งเท่านั้น

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

html เป็นเพียงข้อความธรรมดา

สาเหตุเป็นเพราะคุณใช้คุณสมบัติการแปลงสองครั้ง เนื่องจากกฎ CSS ที่มีการเรียงซ้อนการประกาศครั้งสุดท้ายจะชนะหากมีความจำเพาะเหมือนกัน เนื่องจากการประกาศการแปลงทั้งสองอยู่ในชุดกฎเดียวกันจึงเป็นกรณีนี้

สิ่งที่ทำคือ:

1. หมุนข้อความ 90 องศา ตกลง.
2. แปล 50% โดย 50% ตกลงนี่เป็นคุณสมบัติเดียวกับขั้นตอนที่หนึ่งดังนั้นให้ทำขั้นตอนนี้และละเว้นขั้นตอนที่ 1

ดูhttp://jsfiddle.net/Lx76Y/และเปิดในดีบักเกอร์เพื่อดูการประกาศแรกที่เขียนทับ

เนื่องจากการแปลกำลังเขียนทับการหมุนคุณต้องรวมไว้ในการประกาศเดียวกันแทน: http://jsfiddle.net/Lx76Y/1/

ในการทำสิ่งนี้คุณใช้รายการการแปลงที่คั่นด้วยช่องว่าง:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

โปรดจำไว้ว่ามีการระบุไว้ในสายโซ่ดังนั้นการแปลจึงถูกนำไปใช้ก่อนจากนั้นจึงหมุนหลังจากนั้น

ฉันไม่สามารถแสดงความคิดเห็นดังนั้นที่นี่ไป เกี่ยวกับคำตอบของ @David Storey

ระวัง "ลำดับการดำเนินการ" ในเครือข่าย CSS3! ลำดับจากขวาไปซ้ายไม่ใช่จากซ้ายไปขวา

transformation: translate(0,10%) rotate(25deg);

การrotateดำเนินการจะเสร็จสิ้นก่อนแล้วจึงtranslate.

ดู: CSS3 transform order สำคัญ: การดำเนินการด้านขวาสุดก่อน

ไม่จำเป็นต้องเป็นเช่นนั้นเนื่องจากคุณสามารถใช้ css 'writing-mode' กับค่า 'vertical-lr' หรือ 'vertical-rl' ได้ตามต้องการ

.item {
  writing-mode: vertical-rl;
}

สิ่งที่อาจพลาดไป: ในโปรเจ็กต์การเชื่อมโยงของฉันปรากฎว่ารายการที่คั่นด้วยช่องว่างจำเป็นต้องมีอัฒภาคที่คั่นด้วยช่องว่างในตอนท้าย

กล่าวอีกนัยหนึ่งไม่ได้ผล:

transform: translate(50%, 50%) rotate(90deg);

แต่สิ่งนี้ทำ:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"