Xoay và dịch

Question

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

CSS:

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

Các html chỉ là văn bản đơn giản.

Answer 1

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 thác, khai báo cuối cùng sẽ thắng nếu chúng có cùng độ đặc hiệu. 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.

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

1. xoay văn bản 90 độ. Được.
2. dịch 50% 50%. Ok, đây là cùng một tài sản như bước một, để 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 tuyên bố đầu tiên ghi đè

Khi dịch được ghi đè xoay , bạn phải kết hợp chúng trong tờ khai cùng thay vì: http://jsfiddle.net/Lx76Y/1/

để làm điều này bạn sử dụng một không gian tách ra danh sách các biến đổi:

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

Re thành viên mà họ được chỉ định trong một chuỗi, vì vậy bản dịch được áp dụng trước tiên, sau đó xoay vòng sau đó.

Answer 2

Không cần thiết, vì bạn có thể sử dụng 'chế độ ghi' css với các giá trị 'dọc-lr' hoặc 'dọc-rl' như mong muốn.

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

Answer 3

Cái gì đó có thể bị bỏ lỡ: trong dự án chaining của tôi, nó quay ra một danh sách tách không gian cũng cần có một không gian tách ra dấu chấm phẩy ở cuối.

Nói cách khác, điều này không làm việc:

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

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

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

Answer 4

Tôi không thể bình luận ở đây đi. Giới thiệu về @David Storey answer.

Hãy cẩn thận về "thứ tự thực hiện" trong chuỗi CSS3! Quy tắc là (phải) từ (trái). Không trái sang phải.

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

Thao tác "xoay" được thực hiện trước, so với thao tác "dịch" đến sau/giây.

Xem: CSS3 transform order matters: rightmost operation first