CSS "transform: rotate()" ảnh hưởng đến thiết kế tổng thể với "vị trí: tuyệt đối" (không căn chỉnh đúng)

Question

Tôi sợ rằng tôi hoàn toàn không biết cách giải thích nó cũng như tôi có thể hiển thị nó. Vì vậy, tôi đã thiết lập this Fiddle.

Như bạn có thể thấy, menu điều hướng không phải là vị trí cần thiết. Nó phải được đặt chính xác ở đường viền dưới cùng của phần tử đầu và đến đường viền trái. I E. bottom: 0 và left: 0. Tuy nhiên, tôi đang thiết lập một vòng quay -90degs và rõ ràng là vị trí tuyệt đối trên phần tử nav đang xảy ra trước khi xoay hoặc có lẽ thay vào phần tử gốc như thể vòng xoay không tồn tại.

Tôi đã thử sử dụng các yếu tố giả :before và :after giả để thử xem liệu tôi có thể giải quyết theo cách đó hay không. Nhưng tôi không thể nắm bắt được những yếu tố giả này. Trong cả hai trường hợp, vòng quay đã bị bỏ qua. (Nếu không có sự luân chuyển, các yếu tố nav rõ ràng vị trí riêng của mình mà nó phải được.)

này về cơ bản là các mã:

<div id="head"> 
    <div id="title">My Web</div> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Something Else</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

Không có gì lạ mắt.

Và đây là CSS (các bộ phận của nó quan trọng đến vấn đề này):

#head { 
    position: relative; 
} 
nav { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    transform: rotate(-90deg); 
} 
nav a { 
    display: inline-block; 
    padding: 0 9px; 
} 

Làm thế nào nó hoạt động: you can see this in the Fiddle project.

Hope ai đó ra có thể cung cấp cho tôi một tay.

---

P.S. Ngoài ra, đôi khi, và tùy thuộc vào kích thước của văn bản bên trong các thẻ <a>, có vẻ như, khoảng cách giữa các phần tử dọc trong nav là hơi tăng, như trong nửa pixel, có nghĩa là đường viền bị mờ. You can see this in this other version chỉ với 4 ký tự và khoảng trắng ở một trong các yếu tố <a>. Không thể hiểu tại sao điều này lại tạo nên sự khác biệt. Tuy nhiên, nó làm cho menu trông khá tệ khi nó xảy ra!

Answer 1

Điều này xảy ra bởi vì các yếu tố nav có chiều rộng khác nhau và chiều cao. Theo mặc định, một phần tử được xoay bởi trung tâm của nó, do đó, trong trường hợp của các số nav các góc của khối này sau khi xoay không khớp. Giải pháp cho vấn đề này là đặt thuộc tính transform-orgin sẽ di chuyển điểm xoay sao cho các góc dưới cùng bên trái trước và sau khi chuyển đổi ở cùng một vị trí. Trong trường hợp của bạn là transform-origin: 75px 75px; (hoạt động độc lập với chiều dài <a>).

Here's the fiddle

Đáng tiếc là nó sẽ không giải quyết được vấn đề cho IE8- như những trình duyệt không hỗ trợ chuyển đổi và sử dụng theo cách riêng của họ xoay mọi thứ.

Answer 2

Dường như là phần đệm của ul trong nav của bạn. Hãy thử tinh chỉnh

nav ul {padding-left: 0; }

(dev-công cụ của Chrome có thể giúp bạn tìm ra thiếu 1 hoặc 2 pixel, giúp tôi tìm ra đệm ul.)