CSS Transforms Demo

📌 Elements

💡 Transform Fundamentals

CSS Transforms memungkinkan Anda memodifikasi space koordinat dari model visual CSS, memungkinkan rotasi, skewing, scaling, dan translasi elemen.

transforms.css

          
            /* Basic 2D Transform */

            .box {

              transform: rotate(45deg);

            }

            /* Multiple Transforms */

            .card {

              transform: translateX(50px) scale(1.2);

            }

            /* 3D Transform */

            .cube {

              transform: rotateX(60deg) rotateY(30deg);

              transform-style: preserve-3d;

            }

📝 Penjelasan Detail:

• transform - Memodifikasi space koordinat elemen
• transform-origin - Mengubah titik origin transformasi
• transform-style - Menentukan bagaimana elemen nested di-render dalam 3D space
• perspective - Menentukan jarak antara user dan z=0 plane

🛠️ Features

advanced-transforms.css

          
            /* Translate */

            .move {

              transform: translate(50px, 20px);

            }

            /* Scale with Origin */

            .zoom {

              transform: scale(1.5);

              transform-origin: top left;

            }

            /* 3D Rotation */

            .rotate-3d {

              transform: rotate3d(1, 1, 0, 45deg);

              perspective: 500px;

            }

ℹ️ Browser Support

2D Transforms: Chrome 4+, Firefox 3.5+, Safari 3.1+, IE 9+. 3D Transforms: Chrome 12+, Firefox 10+, Safari 4+, IE 10+.

📊 Basic Tables

transform-values.css

          
            /* Common Transform Functions */

            .translate {

              transform: translate(50px, 20px);

            }

            .rotate {

              transform: rotate(30deg);

            }

            .scale {

              transform: scale(1.2, 0.8);

            }

            .skew {

              transform: skew(20deg, 10deg);

            }

📝 Penjelasan Detail:

• translate(x,y) - Memindahkan elemen sepanjang sumbu X dan Y
• rotate(angle) - Memutar elemen sebesar sudut tertentu
• scale(x,y) - Mengubah ukuran elemen (1 = ukuran normal)
• skew(x-angle,y-angle) - Membuat elemen miring/miring

🚀 Advanced Table

3d-transforms.css

          
            /* 3D Transform Functions */

            .translate-3d {

              transform: translate3d(50px, 20px, 100px);

            }

            .rotate-3d {

              transform: rotate3d(1, 1, 1, 45deg);

            }

            .scale-3d {

              transform: scale3d(1.2, 1.2, 1.5);

            }

            .perspective {

              perspective: 1000px;

              transform: rotateY(45deg);

            }

ℹ️ Browser Support

3D Transforms: Chrome 12+, Firefox 10+, Safari 4+, IE 10+. Requires vendor prefixes (-webkit-, -moz-) for full support.

💡 Pro Tips

🎯 Best Practices

Gunakan transforms untuk animasi performa tinggi dan efek visual yang smooth tanpa mempengaruhi layout.

best-practices.css

          
            /* ✅ Good - Hardware accelerated */

            .animate {

              transition: transform 0.3s ease;

            }

            .animate:hover {

              transform: scale(1.1);

            }

            /* ❌ Avoid - Overusing 3D transforms */

            .over-3d {

              transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

              perspective: 200px;

            }

📝 Penjelasan Detail:

• Gunakan untuk animasi - Transforms di-handle oleh GPU untuk performa lebih baik
• Hindari transform berlebihan - Terlalu banyak transform kompleks bisa mengurangi performa
• Gunakan will-change - Beri tahu browser elemen mana yang akan di-transform
• Perhatikan transform-origin - Titik origin mempengaruhi hasil transformasi