Chuyển đổi CSS3: Nhiều nguồn gốc?

Question

Có thể chỉ định nguồn gốc ở trên cùng bên trái (0%, 0%) để mở rộng quy mô và một nguồn gốc khác (giữa) để xoay trong CSS3 không? Tôi chỉ làm việc với webkit, nếu điều đó có ích.

Tôi hiện đang sử dụng một danh sách thay đổi (ví dụ: -webkit-transform: scale (newScale) xoay (newRotate)

nhưng nó có vẻ như nó không phải là có thể thay đổi nguồn gốc ở giữa đèo Có. Hiện tại, nếu tôi mở rộng một đối tượng và xoay nó với một nguồn gốc ở trung tâm mặc định, vị trí của phần tử hiện đã tắt và vì vậy khi bạn kéo phần tử, con trỏ vẫn ở trên cùng bên trái Thay đổi nguồn gốc cho trung tâm để mở rộng nó để sửa lỗi này, nhưng trình bày các vấn đề mới với xoay và lật.

Answer 1

Tìm thấy một giải pháp tốt cho vấn đề ... bằng cách tạo ra một/con mối quan hệ cha mẹ như sau:

<div class="container"> 
    <img src="" /> 
</div> 

tôi bây giờ có thể thiết lập hai lớp như sau:

.container { 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: scale(0.5); 
} 

.container img { 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform: rotate(45deg); 
} 

này sẽ làm chính xác những gì tôi muốn: tỷ lệ với một nguồn gốc ở phía trên bên trái, sau đó xoay với nguồn gốc ở trung tâm. Thì đấy!

Answer 2

Điều gì về điều đó: http://jsfiddle.net/22Byh/1/

Answer 3

Thay vào đó hãy nghĩ đến việc mở rộng tỷ lệ với nguồn gốc (0,0) dưới dạng một tỷ lệ + dịch với trung tâm gốc. Trong sự cô lập như sau:

-webkit-transform-origin: top left; 
-webkit-transform: scale(1.5); 

là giống như:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0); 

Về lý thuyết trung tâm nguồn gốc luân chuyển nên để lại các góc nhô ra bởi sqrt(1/2)-0.5 đòi hỏi chúng tôi phải di chuyển nguồn gốc xuống và phải bởi 20.71%, nhưng vì lý do nào đó thuật toán biến đổi webkit di chuyển mọi thứ xuống cho chúng ta (nhưng không đủ) và quy mô nguồn gốc cho chúng ta (một lần nữa không hoàn toàn). Do đó chúng ta cần phải di chuyển ngay bởi 50% và thực hiện một số điều chỉnh đối với hành vi kỳ quặc này:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0); 
-webkit-transition: all 2s ease-in; 

Lưu ý: câu trả lời ban đầu của tôi đã sử dụng một div với width:100px; và height100px; mà đòi hỏi một translate3d(54px, 0, 0).