CSS Rotate: rotate(), Property rotate dan Efek Berputar

Memutar sebuah elemen

Ada dua cara dengan hasil yang sama: fungsi rotate() di dalam transform, atau property rotate sendiri. Sudut positif memutar searah jarum jam:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Kotak biru dan hijau diputar persis sama, 45 derajat searah jarum jam di sekitar titik tengahnya. Kotak kuning punya sudut negatif, jadi kotak itu miring berlawanan arah jarum jam. Rotasi tidak pernah memindahkan layout: setiap kotak tetap memakai slot aslinya yang berukuran 90 kali 60, itulah sebabnya elemen yang diputar bisa menimpa elemen di sekitarnya.

Satuan sudut

deg adalah pilihan yang paling umum, sedangkan turn enak dibaca untuk efek berputar (rotate: 1turn). Sudut di atas 360 diperbolehkan dan berpengaruh di animasi: rotate(720deg) di sebuah keyframe berputar dua kali. Selalu tulis satuannya: rotate(45) tidak valid dan diabaikan.

Geser slider untuk melihat sebuah sudut dalam setiap satuan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Memutar di sekitar sudut kotak: transform-origin

Secara default, elemen berputar di sekitar titik tengahnya. transform-origin memindahkan titik porosnya. Jarum jam berputar pada ujungnya, bukan di bagian tengahnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

Ujung bawah jarum berada di pin kuning di tengah muka jam, dan rotate: 120deg memutarnya ke arah jam empat. Hapus baris transform-origin, maka jarum itu berputar di sekitar bagian tengahnya sendiri, lepas dari pin.

Memutar teks dan label vertikal

Kemiringan kecil dengan rotate tidak masalah untuk badge atau stiker. Untuk label yang benar-benar vertikal, writing-mode lebih baik, karena ikut mengubah layout: elemennya menjadi tinggi dan sempit, bukan menimpa elemen di sebelahnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

Hasil pembacaannya menampilkan ukuran layout setiap label. Label yang diputar tetap memakai kotak aslinya yang lebar dan pendek: label itu meninggalkan celah kosong di sebelahnya dan mencuat ke atas dan ke bawah barisnya, masuk ke apa pun yang ada di sana. Label dengan writing-mode memakai kotak yang tinggi dan sempit. Menambahkan rotate: 180deg membuatnya terbaca dari bawah ke atas, yang merupakan arah umum untuk label vertikal.

Memutar ikon saat diklik atau di-hover

Memutar panah 180 derajat adalah cara standar untuk menunjukkan bahwa sebuah bagian sedang terbuka. Gabungkan rotate dengan transisi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

Chevron-nya adalah persegi dengan dua border, diputar 45 derajat supaya menunjuk ke bawah. Saat tombolnya terbuka, chevron berputar ke 225 derajat, menunjuk ke atas, dan transisinya menganimasikan setengah putaran itu. Atribut aria-expanded yang mengatur style-nya, jadi state visual dan state yang diumumkan screen reader tidak pernah bisa berbeda.

Loader yang berputar

Efek berputar adalah rotasi dari 0 sampai 360 derajat, diulang dengan timing linear supaya kecepatannya tidak pernah berubah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Dengan hanya keyframe to, animasinya dimulai dari rotasi elemen itu sendiri (tidak ada) dan berakhir di 360deg, dan infinite mengulanginya tanpa lompatan karena 360deg terlihat sama dengan 0. Untuk orang yang meminta sistemnya mengurangi animasi, spinner-nya berputar tiga kali lebih lambat. Penjelasan lebih lanjut tentang keyframe ada di halaman animation.

Rotasi 3D: rotateX, rotateY

rotateX() memiringkan elemen ke belakang di sekitar sumbu horizontal, dan rotateY() memutarnya di sekitar sumbu vertikal, seperti pintu. Tanpa perspektif, hasilnya hanya terlihat gepeng. perspective pada elemen induk menambahkan kesan kedalaman:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Untuk mencerminkan elemen, bukan memutarnya, pakai scale: -1 1 (membalik secara horizontal). Rotasi 180 derajat membuatnya terbalik atas bawah, dan itu tidak sama.

Kesalahan yang sering terjadi

• Memutar <span> atau <a> yang tetap diam. Elemen inline biasa mengabaikan transform. Tambahkan display: inline-block.
• Rotasi yang hilang saat hover. Aturan hover dengan transform: scale(1.1) menggantikan transform: rotate(...). Pakai property rotate dan scale yang terpisah, atau tulis kedua fungsinya.
• Mengira layout akan menyediakan ruang. Gambar yang diputar tetap memakai kotaknya sebelum diputar dan menimpa elemen di sekitarnya. Beri container-nya ukuran setelah diputar, atau pakai writing-mode untuk teks.
• Spinner dengan ease. Timing default-nya mempercepat lalu memperlambat setiap putaran. Pakai linear.
• Memutar di titik yang salah. Atur transform-origin sebelum menyetel sudutnya.