CSS3 Dönüşümler: Çoklu Kökenler?

Question

Ölçeklendirme için sol üstte bir başlangıç ​​(% 0,% 0) ve CSS3'te döndürme için farklı bir başlangıç ​​(merkez) belirtmek mümkün mü? Ben sadece webkit ile çalışıyorum, eğer yardımcı olursa. (NewRotate)

) ölçeği (newScale döndürmek ancak geçiş arada kaynağını değiştirmek mümkün değil gibi görünüyor mı var:

Şu anda, yani -webkit-transform (bir dönüşüm listesi kullanıyorum. Buna bakmak için daha iyi bir yol? Şu anda, bir nesneyi ölçeklendirir ve varsayılan merkezde bir kökle döndürürsem, öğenin konumu artık kapalıdır ve böylece öğeyi sürüklediğinizde, imleç hala sol üstte öğenin, merkezde olması gerekirken, orijini merkeze çevirmek bunu düzeltir, ancak dönme ve saygısızlık ile yeni sorunlar sunar

Answer 1

şöyle bir üst/alt ilişkisi oluşturarak soruna iyi bir çözüm ... Bulunan:

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

Ben artık kurulum iki sınıfları aşağıdaki gibidir:

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

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

Bu yapacak tam olarak ne istediğimi: sol üstteki bir menşei kullanarak ölçeklendirin, sonra merkezdeki merkezle döndürün. İşte bu kadar!

Answer 2

Bu konuda neler olabilir: http://jsfiddle.net/22Byh/1/

Answer 3

Bunun yerine, orijin merkeziyle ölçekleme + çeviri olarak ölçeklendirme (0,0) ile ölçeklendirmeyi düşünün. izolasyon aşağıdaki:

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

aynıdır:

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

Teoride rotasyon kökenli merkezi köşeleri 20.71% tarafından aşağı ve sağa kökeni hareket etmemizi gerektiren sqrt(1/2)-0.5 tarafından dışarı çıkmış bırakmalısınız, ama bir sebepten dolayı webkit dönüşümü algoritması, bizim için aşağı (ama yeterince değil) bir şeyleri harekete geçirir ve bizim için kökeni ölçeklendirir (yine tam olarak değil). Böylece bu garip davranışı için bazı ayarlamalar 50% tarafından doğru taşımak ve yapmak gerekir:

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

Not: benim orijinal cevap translate3d(54px, 0, 0) gerektirir width:100px; ve height100px; ile div kullanıyordu.