Hallo teman-teman,bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan membahas tentang fungsi properties perspective pada css3.
Mungkin teman-teman yang sudah terjun dalam dunia design web sudah tau tentang fungsi dari properties yang satu ini.
Namun ada kalanya kita berbagi untuk teman-temanyang belum faham tentang fungsi dari properties yang satu ini, perspective ialah kelompok dari css transform dimana fungsinya ialah Menentukan perspektif tentang bagaimana elemen 3D dipandang, jadi kita dapat mengatur tampilan sebuah element 3D, untuk lebih jelasnya kita langsung saja praktek.
Teman-teman silahkan buat sebuah file dan ketikan script berikut :
<!DOCTYPE html> <html> <head> </head> <body> <div id="div-luar"> <div id="div-kuning">Dumet School</div> </div> </body> </html>
Saya membuat 2 buah div didalam struktur htmlnya, nah sekarnag kita atur cssnya, teman-teman silahkan ketikan script css berikut:
<style>
#div-luar {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
perspective: 150px;
}
#div-kuning {
padding: 50px;
position: absolute;
border: 2px solid black;
background-color: #FAC100;
transform: rotateX(40deg);
}
</style>Nah jika teman teman save maka hasilnya akan seperti berikut :
Nah untuk pernjelasan lebih detail, silahakan teman-teman rubah sendiri pengaturan perspectivenya dan pengaturan transformnya, oke kiranya cukup sekian tutorial kali ini, semoga bermanfaat.
Terimakasih.
The post Fungsi Properties Perspective CSS appeared first on Kursus Website Terbaik.