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

Tôi đang cố gắng biế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 CSS sau:

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

Ai đó có thể vui lòng đề xuất nơi tôi đang làm sai?

Cảm ơn.

Đây chỉ là một phỏng đoán có học thức mà không cần xem phần còn lại của HTML / CSS của bạn:

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

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

Trong các trình duyệt dựa trên webkit (Safari và Chrome), -webkit-transform được bỏ qua trên các phần tử nội tuyến. . Đặt display: inline-block;để làm cho nó hoạt động . Đố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ăn bản bị xoay ra khỏi vùng hiển thị.

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

Mô-đun chuyển đổi CSS cấp độ 1 - Thuật ngữ - Phần tử có thể chuyển đổi

Phần tử có thể biến đổi là phần tử thuộc một trong các danh mục sau:

• một phần tử có bố cục được điều chỉnh bởi mô hình hộp CSS, là phần tử nội tuyến cấp khối hoặc cấp nguyên tử hoặc có thuộc tính hiển thị được tính thành table-row, table-row-group, table-header-group, table-footer -nhóm, ô 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, các <a>phần tử là inlinetheo mặc định.

Thay đổi displaygiá trị của thuộc tính để inline-blockhiển thị các phần tử dưới dạng các phần tử cấp nội tuyến nguyên tử và do đó các phần tử trở nên "có thể biến đổi" theo định nghĩa.

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 -webkitcác trình duyệt dựa trên vì nó dường như hoạt động trong IE / FF bất kể.

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

Theo Snook, các phép biến đổi yêu cầu các phần tử bị ảnh hưởng phải được khối. Anh ấy cũng có một số mã ở đó để làm cho nó hoạt động cho IE bằng cách sử dụng các bộ lọc, nếu bạn muốn thêm nó vào (mặc dù dường như có một số hạn chế về giá trị).

-webkit-transform không cần thiết nữa

ms đã hỗ trợ xoay ( -ms-transform: rotate(-10deg);)

thử cái 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;
    }