Dönüşüm kökenli - CSS Hileleri

transform-originTesis Transform başlangıç noktasını değiştirmek icar, CSS dönüştürmeleri ile birlikte kullanılır.

.box ( transform: rotate(360deg); transform-origin: top left; )

Yukarıda belirtildiği gibi, transform-originözellik, bir 2B dönüştürme için en fazla iki boşlukla ayrılmış anahtar sözcük veya uzunluk değeri ve bir 3B dönüştürme için en fazla üç değer alabilir.

Yukarıdaki kodu, geçişi bir tıklama etkinliği kullanılarak uygulanan dönüşümle 200 piksele 200 piksellik bir kutu üzerinde kullanmak şu şekilde davranır:

Bu Kaleme bakın!

Varsayılan olarak, bir dönüşümün kaynağı "% 50% 50" dir ve bu, herhangi bir öğenin tam ortasında yer alır. Başlangıç noktasının "sol üst" olarak değiştirilmesi (yukarıdaki demoda olduğu gibi), öğenin bir dönüş noktası olarak öğenin sol üst köşesini kullanmasına neden olur.

Değerler uzunlukları, yüzdeler veya anahtar kelimelerin olabilir top, left, right, bottom, ve center.

İlk değer yatay konumdur, ikinci değer dikeydir ve üçüncü değer Z eksenindeki konumu temsil eder. Üçüncü değer, yalnızca 3B dönüştürmeler kullanıyorsanız çalışır ve yüzde olamaz.

CodePen'de Shaw (@shshaw) tarafından hazırlanan Pen transform-origin resmine bakın.