Xoay và dịch

Question 1

Tôi đang gặp một số vấn đề khi xoay và định vị một dòng văn bản. Bây giờ nó chỉ là vị trí hoạt động. Việc xoay cũng hoạt động, nhưng chỉ khi tôi tắt định vị.

CSS:

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

Html chỉ là văn bản thuần túy.

Question 2

Lý do là vì bạn đang sử dụng thuộc tính biến đổi hai lần. Do các quy tắc CSS với phân tầng, khai báo cuối cùng sẽ thắng nếu chúng có cùng tính cụ thể. Vì cả hai khai báo biến đổi đều nằm trong cùng một bộ quy tắc, đây là trường hợp.

Những gì nó đang làm là thế này:

xoay văn bản 90 độ. Đồng ý.
dịch 50% đến 50%. Được rồi, đây là thuộc tính giống như bước một, vì vậy hãy thực hiện bước này và bỏ qua bước 1.

Xem http://jsfiddle.net/Lx76Y/ và mở nó trong trình gỡ lỗi để xem khai báo đầu tiên bị ghi đè

Vì bản dịch đang ghi đè vòng xoay, thay vào đó bạn phải kết hợp chúng trong cùng một khai báo: http://jsfiddle.net/Lx76Y/1/

Để làm điều này, bạn sử dụng danh sách các phép biến đổi được phân tách bằng dấu cách:

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

Hãy nhớ rằng chúng được chỉ định trong một chuỗi, do đó, phép dịch được áp dụng trước, sau đó xoay vòng sau đó.

Question 3

Tôi không thể bình luận vì vậy ở đây tiếp tục. Về câu trả lời của @David Storey.

Hãy cẩn thận về "thứ tự thực thi" trong chuỗi CSS3! Thứ tự là từ phải sang trái, không phải từ trái qua phải.

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

Các rotatehoạt động được thực hiện trước, sau đótranslate .

Xem: Các vấn đề liên quan đến thứ tự chuyển đổi CSS3: hoạt động ngoài cùng bên phải đầu tiên

Question 4

Không cần điều đó, vì bạn có thể sử dụng css 'write-mode' với các giá trị 'vertical-lr' hoặc 'vertical-rl' như mong muốn.

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

Question 5

Một cái gì đó có thể bị bỏ sót: trong dự án chuỗi của tôi, hóa ra một danh sách được phân tách bằng dấu cách cũng cần có dấu chấm phẩy được phân tách bằng dấu cách ở cuối.

Nói cách khác, điều này không hoạt động:

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

nhưng điều này không:

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