dịch vs biến đổi nguồn gốc css3

Question

Tôi đã tự hỏi nếu ai đó có thể giúp tôi. Tôi đã không hiểu chính xác thuộc tính css3 là gì: transform-origin. Tôi dường như không thể đi theo hướng nó đang chuyển động.

Ví dụ: giả sử bạn có div vuông và xoay 40 độ. và sau đó bạn thực hiện transform-origin: 100% 0%. bạn không thể chỉ làm một số translateX(and some value)? Có vẻ như translateX sẽ di chuyển nó dọc theo trục x đối với trục mới được xoay sau khi thực hiện xoay. Tôi không thể làm theo những gì biến đổi nguồn gốc đang làm, hoặc chính xác nó là gì.

Một ví dụ rõ ràng và thấu đáo sẽ được đánh giá cao. =)

Answer 1

transform-origin thay đổi điểm mà tại đó phần tử biến đổi thay vì di chuyển toàn bộ phần tử (như dịch sẽ). Giá trị mặc định là transform-origin: 50% 50%;.

Dưới đây là một ví dụ: http://jsfiddle.net/joshnh/73g7t/