การแปลง CSS3 ไม่ทำงาน

ฉันกำลังพยายามเปลี่ยนรายการเมนูโดยหมุน 10 องศา CSS ของฉันทำงานใน Firefox แต่ฉันไม่สามารถจำลองเอฟเฟกต์ใน Chrome และ Safari ได้ ฉันรู้ว่า IE ไม่รองรับคุณสมบัติ CSS3 นี้ดังนั้นจึงไม่ใช่ปัญหา

ฉันใช้ CSS ต่อไปนี้:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

ใครช่วยแนะนำหน่อยได้ไหมว่าฉันผิดพลาดตรงไหน

ขอบคุณ

นี่เป็นเพียงการคาดเดาที่มีการศึกษาโดยไม่เห็นส่วนที่เหลือของ HTML / CSS ของคุณ:

คุณสมัครdisplay: blockหรือdisplay: inline-blockยังli a? ถ้าไม่ลองดู

มิฉะนั้นให้ลองใช้กฎการแปลง CSS3 liแทน

ในเบราว์เซอร์ที่ใช้ webkit (Safari และ Chrome) -webkit-transform จะถูกละเว้นองค์ประกอบแบบอินไลน์ . ตั้งค่าdisplay: inline-block;เพื่อให้ใช้งานได้ เพื่อวัตถุประสงค์ในการสาธิต / ทดสอบคุณอาจต้องการใช้มุมลบหรือtransformation-originเพื่อไม่ให้ข้อความหมุนออกจากพื้นที่ที่มองเห็นได้

_{เนื่องจากไม่มีใครอ้างถึงเอกสารที่เกี่ยวข้อง:}

CSS Transforms Module ระดับ 1 - คำศัพท์ - องค์ประกอบที่เปลี่ยนแปลงได้

องค์ประกอบที่เปลี่ยนแปลงได้คือองค์ประกอบหนึ่งในประเภทต่อไปนี้:

• องค์ประกอบที่มีเลย์เอาต์อยู่ภายใต้รูปแบบกล่อง CSS ซึ่งเป็นองค์ประกอบในระดับบล็อกหรือระดับอะตอมหรือที่คุณสมบัติการแสดงผลคำนวณเป็นแถวตารางกลุ่มแถวตารางตารางส่วนหัวกลุ่มส่วนท้ายของตาราง -group, table-cell หรือ table-caption
• องค์ประกอบในเนมสเปซ SVG และไม่ได้อยู่ภายใต้การควบคุมโดยโมเดลกล่อง CSS ซึ่งมีแอตทริบิวต์ transform "patternTransform" หรือ gradientTransform

ในกรณีของคุณ<a>องค์ประกอบจะเป็นไปinlineตามค่าเริ่มต้น

การเปลี่ยนdisplayค่าของคุณสมบัติเพื่อinline-blockแสดงองค์ประกอบเป็นองค์ประกอบระดับอะตอมแบบอินไลน์ดังนั้นองค์ประกอบจึงกลายเป็น"เปลี่ยนแปลงได้"ตามคำจำกัดความ

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

ดังที่ได้กล่าวมาแล้วสิ่งนี้ดูเหมือนจะใช้ได้เฉพาะใน-webkitเบราว์เซอร์ที่ใช้เนื่องจากดูเหมือนว่าจะทำงานใน IE / FF โดยไม่คำนึงถึง

คุณกำลังพยายามหมุนลิงก์โดยเฉพาะหรือไม่? เนื่องจากการทำบนแท็ก LIดูเหมือนจะทำงานได้ดี

ตามการเปลี่ยนแปลงของSnookต้องการให้องค์ประกอบที่ได้รับผลกระทบถูกบล็อก นอกจากนี้เขายังมีรหัสบางอย่างเพื่อให้ใช้งานได้กับ IE โดยใช้ตัวกรองหากคุณต้องการเพิ่ม (แม้ว่าจะมีข้อ จำกัด เกี่ยวกับค่า)

-webkit-transform ไม่จำเป็นอีกต่อไป

ms แล้วรองรับการหมุน ( -ms-transform: rotate(-10deg);)

ลองสิ่งนี้:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }