PERSPECTIVE PADA TRANSFORMASI 3D

Transformasi 3D di CSS memungkinkan kamu untuk mengubah posisi dan bentuk elemen HTML. Dalam artikel ini, kita akan fokus pada perspective, yang memungkinkan kamu untuk mengubah pandangan elemen seolah-olah dalam ruang 3D.

Apa itu Perspective dalam CSS?

Perspective dalam CSS adalah properti yang membantu menciptakan ilusi depth (kedalaman) dan jarak dalam transformasi 3D. Ini merujuk pada jarak dari posisi pandangan ke elemen dalam ruang 3D.

Ketika kamu menentukan perspective untuk elemen, anak-anak elemen tersebut akan muncul dalam perspektif 3D. Properti perspective ditentukan dalam satuan panjang, seperti px, cm, em, dll.

Berikut adalah sintaksnya:

element {
  perspective: 150px;
}

Bagaimana Menggunakan Perspective?

Perspective diaplikasikan pada elemen induk dari elemen yang ingin kamu transformasikan. Berikut contoh penggunaannya:

<div class="container">
  <div class="box"></div>
</div>

.container {
  perspective: 500px;
}

.box {
  transform: rotateX(45deg);
}

Dalam contoh di atas, .box adalah elemen yang akan diberi transformasi. .container adalah elemen induk .box dan diberi properti perspective.

Perspective-Origin

Properti perspective-origin mengubah titik pandangan dari perspective. Nilai default adalah 50% 50%, yang menempatkan titik pandangan di tengah elemen.

.container {
  perspective: 500px;
  perspective-origin: 100% 100%;
}

Contoh Penggunaan Perspective

Mari kita coba contoh lain untuk memahami lebih lanjut penggunaan perspective. Kami akan membuat kubus 3D dan mengubah perspektifnya.

<div class="container">
  <div class="box">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
</div>

.container {
  perspective: 800px;
}

.box {
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(10deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #f0f;
}

Terus eksplorasi perspective dan cobalah variasi berbeda untuk memahami lebih jauh cara kerjanya. Selamat belajar!