Przekształcenia CSS3: wiele początków?

Question

Czy jest możliwe określenie początku w lewym górnym rogu (0%, 0%) dla skalowania i innego początku (środka) dla obrotu w CSS3? Pracuję tylko z webkitem, jeśli to pomaga.

Obecnie używam listę transformacji (tj -webkit-transform: scale (newScale) obracają (newRotate)

ale wydaje się, że nie jest możliwe, aby zmienić źródło w przejściach między nimi istnieje. Lepiej to teraz przejrzeć? Obecnie, jeśli przeskaluję obiekt i obrócę go o początek w domyślnym środku, pozycja elementu jest teraz wyłączona, więc po przeciągnięciu elementu kursor nadal znajduje się w lewym górnym rogu Zmiana środka na środek, aby to skalować, naprawia to, ale przedstawia nowe problemy związane z obrotem i odbiciem

Answer 1

Znaleziono dobre rozwiązanie problemu ... poprzez tworzenie relacji nadrzędny/podrzędny w następujący sposób:

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

mogę teraz konfiguracji dwie klasy w następujący sposób:

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

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

to zrobi dokładnie to, czego chcę: skalowanie z początkiem w lewym górnym rogu, a następnie obracanie z początkiem w środku. Voila!

Answer 2

Co z tego: http://jsfiddle.net/22Byh/1/

Answer 3

Zamiast myśleć o skalowaniu z początkiem (0,0) jako skalowanie + tłumaczenie z centrum początkowym. W izolacji, co następuje:

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

jest taka sama, jak:

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

Teoretycznie rotacja centrum pochodzenie należy pozostawić rogi wystające przez sqrt(1/2)-0.5 wymagające nam przenieść pochodzenie dół iw prawo przez 20.71%, ale z jakiegoś powodu algorytm transformacji webkita przenosi dla nas rzeczy (ale nie dość) i skaluje dla nas pochodzenie (znowu nie całkiem). Zatem musimy przesunąć w prawo przez 50% i dokonać pewnych korekt do tego dziwne zachowanie:

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

Uwaga: mój oryginalny odpowiedź używał div z width:100px; i height100px; która wymaga translate3d(54px, 0, 0).