CSS Dönüşüm Üretici

translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) ve skew (X/Y) için kaydırıcıların yanı sıra düzenlenebilir bir transform-origin ve ayarlanabilir önizleme kutusu boyutu ile etkileşimli olarak bir transform bildirimi oluşturun. Üretilen CSS, dönüşüm için translate3d kullanır, scale/rotate/rotateX/rotateY/skew değerlerini yalnızca değiştirildiğinde birleştirir ve transform-origin ile birlikte çıktı verir.

1. Bir transform oluşturmak için Translate, Scale, Rotate ve Skew altındaki kaydırıcıları sürükleyin; her değerde ayrıca hassas giriş için sayısal bir alan vardır. 2. Önizleme Kutusu Boyutunu (50–250px) ayarlayın ve Transform-Origin değerini düzenleyin (herhangi bir CSS origin dizesi, varsayılan 50% 50%). 3. Her değeri nötr varsayılanına döndürmek için Reset'e tıklayın. 4. Hem transform: ... hem de transform-origin: ... bildirimlerini kopyalamak için Copy'ye tıklayın.

translateX/Y/Z: -200 ila 200 px; herhangi biri sıfırdan farklı olduğunda birlikte translate3d(x, y, z) olarak üretilir. scaleX/Y: 0.1 ila 3; herhangi biri 1'den farklıysa scale(x, y) olarak üretilir. rotate (Z): -360 ila 360deg. rotateX/Y: -180 ila 180deg. skewX/Y: -60 ila 60deg; herhangi biri sıfırdan farklıysa skew(x, y) olarak üretilir. Hiçbir fonksiyon değiştirilmezse çıktı transform: none olur.