transform
Bahasa Inggeris [trænsˈfɔ:m] US [trænsˈfɔ:rm]
vt.Transform;
css mengubah harta sintaks
Peranan: Atribut transform menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen. Untuk lebih memahami sifat transformasi, lihat demo ini.
Syntax: transform: none|transform-functions
Penerangan: none defines no conversion. matriks(n,n,n,n,n,n) mentakrifkan penjelmaan 2D, menggunakan matriks enam nilai. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) mentakrifkan penjelmaan 3D menggunakan matriks 4x4 16 nilai. translate(x,y) mentakrifkan transformasi 2D. translate3d(x,y,z) mentakrifkan transformasi 3D. translateX(x) mentakrifkan penjelmaan, hanya menggunakan nilai paksi X. translateY(y) mentakrifkan penjelmaan, hanya menggunakan nilai paksi-Y. translateZ(z) mentakrifkan terjemahan 3D, hanya menggunakan nilai paksi Z. skala(x,y) mentakrifkan transformasi penskalaan 2D. scale3d(x,y,z) mentakrifkan transformasi penskalaan 3D. scaleX(x) Mentakrifkan transformasi penskalaan dengan menetapkan nilai paksi X. skalaY(y) mentakrifkan transformasi penskalaan dengan menetapkan nilai paksi Y. scaleZ(z) Mentakrifkan transformasi penskalaan 3D dengan menetapkan nilai paksi Z. Putar(sudut) mentakrifkan putaran 2D, menentukan sudut dalam parameter. rotate3d(x,y,z,angle) mentakrifkan putaran 3D. rotateX(angle) mentakrifkan putaran 3D di sepanjang paksi-X. rotateY(angle) mentakrifkan putaran 3D sepanjang paksi Y. rotateZ(angle) mentakrifkan putaran 3D sepanjang paksi Z. condong(sudut-x, sudut-y) mentakrifkan penjelmaan condong 2D di sepanjang paksi X dan Y. skewX(sudut) mentakrifkan transformasi condong 2D di sepanjang paksi-X. skewY(sudut) mentakrifkan transformasi condong 2D di sepanjang paksi Y. perspective(n) Mentakrifkan pandangan perspektif untuk elemen transformasi 3D.
Nota: Internet Explorer 10, Firefox dan Opera menyokong atribut transformasi. Internet Explorer 9 menyokong sifat alternatif -ms-transform (untuk transformasi 2D sahaja). Safari dan Chrome menyokong sifat alternatif -webkit-transform (transformasi 3D dan 2D). Opera hanya menyokong penukaran 2D.
css mengubah harta contoh
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Run Instance »
Klik butang "Run Instance" untuk melihat instance dalam talian