Video: HTML için uzantı değiştirme 2025
CSS 3, web sitenizde iPhone ve iPad'de görüntülenmek üzere çok sayıda serin efektler yaratmanıza olanak tanır. CSS 3 dönüştürme özellikleri, öğesini 2D ve 3D efektler oluşturmak için dönüştürmenizi sağlar. Bir öğenin birden çok yönünü değiştirmek için dönüşümlerin bir listesini belirtebilirsiniz. Birden fazla seçenek belirtilirse, her biri listelenen sırayla uygulanır.
Dönüşüm seçenekleri, bu listede açıklananları içerir:
-
ölçek - Bir elemanın yüksekliğini ve genişliğini değiştirir. Genişlik ve yükseklik için farklı bir ölçek tanımlamak için iki sayı belirtebilirsiniz. Bununla birlikte, bu eleman genellikle bir unsuru orantılı olarak ölçeklemek için yalnızca bir sayı ile kullanılır. Aşağıdaki örneklerden birincisi, elemanı boyutunun yarısına ölçeklendirir ve ikincisi elemanı genişliğin yarısına ve iki katı uzunluğa dönüştürür:
-webkit-transform: scale (0.5); -webkit-dönüşümü: ölçek (2, 0 5);
-
translate - Bu özelliği, , ya çevirmek ya da konumunu A'dan B konumuna eşit bir şekilde x ve y eksenleri boyunca çevirmek için kullanın. Aynı anda sadece bir eksen boyunca öğeleri taşımak için translateX ve translateY'yi de kullanabilirsiniz. Örneğin, bu kod bir öğenin soldan 150 piksel ve üstten 150 taşmasına neden olur:
-webkit-dönüşümü: tercüme et (150px, -150px);
-
çarpıklık - Bu özelliği, eğrilt , veya bir öğenin konumunu, x ve y eksenlerinde bir öğeyi eğrilten belirlenmiş bir değere göre değiştirmek için kullanın. Örneğin, bu, x ekseni üzerinde 20 derecelik bir öğe çarpıtabilir:
-webkit-dönüşümü: eğriltme (15 derece, 4 derece);
-
döndür - Bu özelliği, , döndürmek veya döndürme açısını kontrol eden belirli bir değere dayalı olarak bir öğenin konumunu değiştirmek için kullanın. Örneğin, bu koddaki ilk örnek bir öğeyi 5 derece sağa döndürür, ikincisi elemanı -5 (negatif 5) derece döndürür.
Şekilden görülebileceği gibi, bu tasarımda sağdaki ve solda bulunan fotoğrafların merkez görüntüden uzaklaşmasını sağlar:
-webkit-transform: rotate (5deg); -webkit-dönüşümü: döndür (-5 derece);
Bu şekilde gösterilen SCUBA sitesi örneğinde, CSS Döndürme özelliğini kullanarak - sırasıyla Safari, Firefox ve Chrome'da - iki dış görüntünün sırasıyla sola ve sağa döndüğünü görüyoruz. IE ile bu sayfayı ziyaret edin ve kutular düz çizgide, ancak bu şekilde kötü görünmüyor, bu nedenle hiçbir zarar gelmiyor.
Ayrıca iPad / iPhone'u yataydan portre görünümüne döndürdüğünüzde, içeriğin tüm ekrana dolması için tasarımın alt kısmına sıkışmış bir görüntü olduğunu fark edin.
