Transformasi CSS mengubah posisi, ukuran, dan orientasi elemen tanpa memengaruhi alur dokumen. Putar, skala, terjemahkan, dan miringkan dapat digabungkan dalam satu properti transformasi, dan semuanya dianimasikan dengan lancar dengan transisi CSS.
Seret penggeser untuk melihat setiap transformasi diterapkan secara real time. Persegi panjang putus-putus menunjukkan posisi asli sedangkan kartu solid menunjukkan hasil transformasi. Salin nilai transformasi lengkap ketika Anda puas.
Frequently Asked Questions
Q: Apa perbedaan antara terjemahan dan posisi?
Apa perbedaan antara terjemahan dan posisi? Terjemahan memindahkan elemen secara visual tanpa mengubah alur tata letak. Posisi (atas/kiri) menghilangkan elemen dari aliran atau menggeser saudara kandungnya. Terjemahan juga memiliki akselerasi GPU dan animasi yang lebih cepat.
Q: Apakah transformasi mempengaruhi tata letak?
Apakah transformasi mempengaruhi tata letak? Tidak. Elemen yang diubah mempertahankan ruang aslinya dalam alur dokumen, jadi tumpang tindih dan luapan adalah hal biasa — gunakan margin atau padding untuk menghemat ruang.
Q: Bisakah saya menggabungkan beberapa transformasi?
Bisakah saya menggabungkan beberapa transformasi? Ya, daftarkan mereka dengan dipisahkan spasi dalam satu properti: transform: TranslateX(10px)rotate(45deg) scale(1.2); Mereka berlaku dari kanan ke kiri dalam sistem koordinat.
Q: Mengapa elemen yang saya putar buram?
Mengapa elemen yang saya putar buram? Rotasi pada sudut non-90 derajat menyebabkan artefak anti-aliasing. Menambahkan skala kecil (1,001) atau menggunakan will-change: transform dapat membantu di beberapa browser.
Q: Apakah transformasi berfungsi dengan animasi?
Apakah transformasi berfungsi dengan animasi? Ya, transform adalah salah satu properti termurah untuk dianimasikan. Sandingkan dengan @keyframes atau transisi — pengomposisian GPU membuatnya lancar bahkan di perangkat seluler.
Warna Batik Indonesia
Dari coklat sogan hingga biru indigo, warna batik Indonesia mewarisi teknik pewarnaan alami dari daun indigo, kulit pohon soga, dan kunyit. Setiap warna menyimpan filosofi Jawa yang dalam.
Coklat Sogan #8B4513Warna khas batik klasik dari kulit pohon soga
Biru Indigo #1A3A5CPewarna alami dari daun indigo (nila)
Merah Batik #C41E3AWarna berani khas batik pesisir
Kuning Kunyit #E3A857Kuning alami dari rimpang kunyit
Hijau Lumut #8A9A5BWarna alami dari campuran indigo dan kunyit
Ungu Terong #614051Warna buah terong khas batik Sidoarjo
Krem Batik #F5F0E1Warna dasar kain mori sebelum dibatik
Hitam Pekat #1B1B1BHitam dari getah pohon tingi untuk batik keraton
Biru Langit #4A90D9Warna langit cerah khas batik pesisir
Oranye Jingga #FF7F00Warna cerah khas batik kontemporer
Q: Apa itu warna sogan?
Apa itu warna sogan? Sogan (#8B4513) adalah warna coklat khas batik klasik yang dihasilkan dari kulit pohon soga. Warna ini identik dengan batik keraton Yogyakarta dan Solo yang elegan.
Q: Bagaimana warna indigo batik dibuat?
Bagaimana warna indigo batik dibuat? Biru indigo (#1A3A5C) dibuat dari daun indigo (Indigofera tinctoria) yang direndam dan difermentasi. Pewarna alami ini telah digunakan sejak zaman kerajaan Jawa.