Fungsi Properties Perspective CSS
Hallo teman-teman,bertemu lagi di panduan Source Code Aplikasi, di panduan kali ini kita akan membahas mengenai kegunaan properties perspective di CSS3.
Mungkin teman-teman yang telah terjun pada dunia design web telah tau mengenai kegunaan dari properties yang satu ini.
Namun ada kalanya kita berbagi bagi teman-temanyang belum faham mengenai kegunaan dari properties yang satu ini, perspective ialah kelompok dari CSS transform dimana fungsinya ialah Menentukan perspektif mengenai bagaimana unsur 3D dipandang, jadi kita dapat mengatur tampilan sebuah element 3D, bagi lebih jelasnya kita seketika saja praktek.
Teman-teman silahkan bikin sebuah file dan ketikan script berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=div-luar>
<div id=div-kuning>Source Code Aplikasi</div>
</div>
</body>
</html>
Saya merancang 2 buah div didalam struktur htmlnya, nah kini 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 bila teman teman save karenanya hasilnya akan seperti berikut :
Nah bagi penjelasan lebih detail, silakan teman-teman ubah sendiri pengaturan perspectivenya dan pengaturan transformnya, oke kiranya lumayan demikianlah panduan kali ini, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
