Hallo teman-teman kursus css private online semuanya kembali lagi di artikel Dumet school, Pada kesempatan kali ini saya akan membahas tentang CSS nih teman-teman setelah dari kemarin-kemarin kita selalu membbahas yang berat-berat Heheh. Oke sekaran lebih sepesifiknya kita akan membahas tentang Cara Menggunakan 3D Transform Pada CSS.
Menggunakan dengan transformasi 3d, kita dapat memindahkan elemen ke sumbu x, sumbu y dan sumbu z, Di bawah ini contoh dengan jelas menentukan bagaimana elemen akan berputar.
Berikut table yang dapat di gunakan untuk membuat 3D transform :
Jadi penggunanya jika langsung menggunakan kasus adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<#style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>
JIka code di atas di jalankan maka hasilnya adalah 2 buah kotak dengan effek trasnform rotate yang menggunakan 3D transform yah kawan kawan kursus css private online.
Nah 2D transform ini kita dapat menggubakan beberapa CSS transform yang ada pada Table di atas untuk membuatnya dengan tujuan yang berbda-beda sesaui kebutuhan.
Oke baiklah teman-teman kursus privat css online cukup sampai di sini dulu pembahasn kita tentang Cara Menggunakan 3D Transform Pada CSS semoga bermanfaat sampai bertemu pada artikel yang selanjutnya.