Chuyển đổi CSS3 không hoạt động

Question

Tôi đang cố chuyển đổi các mục menu của mình bằng cách xoay chúng 10 độ. CSS của tôi hoạt động trong Firefox nhưng tôi đã không thể tái tạo hiệu ứng trong Chrome và Safari. Tôi biết IE không hỗ trợ thuộc tính CSS3 này nên đó không phải là vấn đề.

tôi đã sử dụng sau CSS:

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

thể ai xin đề nghị nơi tôi đang đi sai?

Cảm ơn.

Answer 1

này chỉ đơn thuần là một giáo dục đoán mà không nhìn thấy phần còn lại của HTML/CSS:

Bạn đã áp dụng display: block hoặc display: inline-block-li a? Nếu không, hãy thử nó.

Nếu không, hãy thử áp dụng quy tắc chuyển đổi CSS3 thành li thay thế.

Answer 2

Bạn có đang cố gắng chỉ xoay liên kết không? Bởi vì làm điều đó on the LI tags dường như hoạt động tốt.

According to Snook biến đổi yêu cầu các yếu tố bị ảnh hưởng là chặn. Ông cũng có một số mã ở đó để làm cho công việc này cho IE bằng cách sử dụng bộ lọc, nếu bạn quan tâm để thêm nó vào (mặc dù có vẻ là một số hạn chế về giá trị).

Answer 3

Trong trình duyệt dựa trên webkit (Safari và Chrome), -webkit-transformis ignored on inline elements.. Đặt display: inline-block; thành make it work. Đối với mục đích trình diễn/thử nghiệm, bạn cũng có thể muốn sử dụng góc âm hoặc transformation-origin vì sợ rằng văn bản được xoay ra khỏi vùng hiển thị.

Answer 4

-webkit-transform là không cần thiết

ms đã hỗ trợ luân chuyển (-ms-transform: rotate(-10deg);)

thử điều này:

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; 
    } 

Answer 5

_{Vì không ai tham chiếu tài liệu liên quan:}

CSS Transforms Module Level 1 - Terminology - Transformable Element

Một yếu tố năng biến là một yếu tố trong một trong các loại:

• một yếu tố mà bố trí được quản lý bởi các mô hình hộp CSS đó là hoặc là một block-level hoặc atomic inline-level element, hoặc có display property tính để bàn hàng , nhóm-hàng-nhóm, nhóm tiêu đề, nhóm chân trang, ô bảng hoặc chú thích bảng
• một phần tử trong không gian tên SVG và không bị chi phối bởi mô hình hộp CSS có biến đổi thuộc tính, 'patternTransform' hoặc gradientTransform.

Trong trường hợp của bạn, <a> yếu tố này là inline theo mặc định.

Thay đổi giá trị của thuộc tính display thành inline-block hiển thị các thành phần là atomic inline-level elements và do đó các thành phần trở thành định nghĩa "transformable".

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

Như đã đề cập ở trên, điều này dường như chỉ áp dụng trong các trình duyệt dựa -webkit vì nó dường như làm việc trong IE/FF không phân biệt.