Transisi dan animasi adalah fitur penting dalam CSS yang memungkinkan kita untuk membuat efek visual yang lebih menarik dan interaktif. Mari kita bahas dasar-dasar tentang transisi, animasi, serta transformasi 2D dan 3D.
### 1. **Transisi**
Transisi memungkinkan perubahan dari satu gaya ke gaya lainnya secara halus dalam waktu tertentu. Ini biasanya digunakan saat elemen di-hover atau saat perubahan status terjadi.
**Contoh Transisi Sederhana:**
```css
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease, transform 0.5s ease; /* Transisi selama 0.5 detik */
}
.box:hover {
background-color: red; /* Warna berubah saat hover */
transform: scale(1.1); /* Zoom sedikit saat hover */
}
```
**HTML:**
```html
<div class="box"></div>
```
### 2. **Animasi Dasar**
Animasi memungkinkan kita untuk mendefinisikan gaya yang berubah dari satu keadaan ke keadaan lain dengan menggunakan keyframes. Kita dapat mengontrol berbagai aspek seperti durasi, timing function, dan iterasi.
**Contoh Animasi Dasar:**
```css
@keyframes myAnimation {
0% {
transform: translateY(0); /* Posisi awal */
}
50% {
transform: translateY(-30px); /* Naik 30px */
}
100% {
transform: translateY(0); /* Kembali ke posisi awal */
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: green;
animation: myAnimation 1s infinite; /* Menjalankan animasi selama 1 detik, berulang terus */
}
```
**HTML:**
```html
<div class="animated-box"></div>
```
### 3. **Transformasi 2D dan 3D**
Transformasi digunakan untuk mengubah posisi, ukuran, dan bentuk elemen. Transformasi 2D termasuk pergeseran, rotasi, skala, dan kemiringan, sedangkan transformasi 3D memungkinkan kita untuk memanipulasi elemen dalam ruang tiga dimensi.
**Contoh Transformasi 2D:**
```css
.transform-box {
width: 100px;
height: 100px;
background-color: orange;
transition: transform 0.3s ease; /* Transisi transformasi */
}
.transform-box:hover {
transform: rotate(45deg) scale(1.2); /* Rotasi dan skala saat hover */
}
```
**Contoh Transformasi 3D:**
```css
.perspective-container {
perspective: 1000px; /* Menentukan perspektif 3D */
}
.perspective-box {
width: 100px;
height: 100px;
background-color: purple;
transform-style: preserve-3d; /* Mengaktifkan 3D untuk anak */
transition: transform 0.5s ease; /* Transisi */
}
.perspective-box:hover {
transform: rotateY(180deg); /* Rotasi pada sumbu Y saat hover */
}
```
**HTML:**
```html
<div class="perspective-container">
<div class="perspective-box"></div>
</div>
```
