Setiap Elemen Dalam Halaman Web Bentuk Dasarnya adalah Box/Kotak. Dengan konsep tersebut kita bisa memberikan :
- ukuran
- posisi
- margin
- padding
- border
- content/isi
- warna
- gambar
Property CSS3 untuk mengatur ukuran tetap pada box tanpa di pengaruhi oleh padding dan border :
box-sizing: border-box;
Cara mengetahui konsep diatas yaitu :
- Inspect Halaman
- Klik Tanda + pada Style
- Tambakan CSS : *{ border: solid red 1px}
Menampilkan Berupa 3D-View pada halaman yang dibuka dengan cara :
- Buat Bookmark baru dengan nama 3D
- Isikan Script Dibawah pada bookmark yang dibuat
javascript:void function(b,p)%7Bfunction l(k,c,b,e,g,d,f)%7Breturn"<div style%3D%27position:absolute%3B-webkit-transform-origin: 0 0 0%3B"%2B("background:"%2Bf%2B"%3B")%2B("width:"%2Be%2B"px%3B height:"%2Bg%2B"px%3B")%2B("-webkit-transform:"%2B("translate3d("%2Bk%2B"px,"%2Bc%2B"px,"%2Bb%2B"px)")%2B("rotateX(270deg) rotateY("%2Bd%2B"deg)")%2B"%3B")%2B"%27></div>"%7Dfunction o(k,c,d,f)%7Bfor(var j%3Dk.childNodes,n%3Dj.length,m%3D0%3Bm<n%3Bm%2B%2B)%7Bvar a%3Dj%5Bm%5D%3Bif(1%3D%3D%3Da.nodeType)%7Ba.style.overflow%3D"visible"%3Ba.style.WebkitTransformStyle%3D"preserve-3d"%3Ba.style.WebkitTransform%3D"translateZ("%2B(b%2B(n-m)*q).toFixed(3)%2B"px)"%3Bvar h%3Dd,i%3Df%3Ba.offsetParent%3D%3D%3Dk%26%26(h%2B%3Dk.offsetLeft,i%2B%3Dk.offsetTop)%3Bo(a,c%2B1,h,i)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft%2Ba.offsetWidth,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop%2Ba.offsetHeight,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%7D%7D%7Dvar g%3D"%23C33,%23ea4c88,%23663399,%230066cc,%23669900,%23ffcc33,%23ff9900,%23996633".split(","),q%3D0.001,e%3D"",d%3Ddocument.body%3Bd.style.overflow%3D"visible"%3Bd.style.WebkitTransformStyle%3D"preserve-3d"%3Bd.style.WebkitPerspective%3Dp%3Bvar r%3D(window.innerWidth/2).toFixed(2),s%3D(window.innerHeight/2).toFixed(2)%3Bd.style.WebkitPerspectiveOrigin%3Dd.style.WebkitTransformOrigin%3Dr%2B"px "%2Bs%2B"px"%3Bo(d,0,0,0)%3Bvar f%3Ddocument.createElement("DIV")%3Bf.style.display%3D"none"%3Bf.style.position%3D"absolute"%3Bf.style.top%3D0%3Bf.innerHTML%3De%3Bd.appendChild(f)%3Bvar j%3D"NO_FACES"%3Bdocument.addEventListener("mousemove",function(b)%7Bif("DISABLED"!%3D%3Dj)%7Bvar c%3Db.screenX/screen.width,b%3D(360*(1-b.screenY/screen.height)-180).toFixed(2),c%3D(360*c-180).toFixed(2)%3Bd.style.WebkitTransform%3D"rotateX("%2Bb%2B"deg) rotateY("%2Bc%2B"deg)"%7D%7D,!0)%3Bdocument.addEventListener("mouseup",function()%7Bswitch(j)%7Bcase "NO_FACES":j%3D"FACES"%3Bf.style.display%3D""%3Bbreak%3Bcase "FACES":j%3D"NO_FACES",f.style.display%3D"none"%7D%7D,!0)%7D(25,5E3)%3B
Cara Jika Ditambahkan Dalam Halaman HTML :
- Tambahkan perintah berikut ini pada tag body : onload='tampilan3D()'
- Tambahkan perintah ini pada halaman yang akan di tampilkan secara 3D
<script>
function tampilan3D() {
var b = 20;
var p = window.innerWidth;
function l(k, c, b, e, g, d, f) {
return "<div style='border:2px solid red;position:absolute;-webkit-transform-origin: 0 0 0;" + ("background:" + f + ";") + ("width:" + e + "px; height:" + g + "px;") + ("-webkit-transform:" + ("translate3d(" + k + "px," + c + "px," + b + "px)") + ("rotateX(270deg) rotateY(" + d + "deg)") + ";") + "'></div>";
}
function o(k, c, d, f) {
for (var j = k.childNodes, n = j.length, m = 0; m < n; m++) {
var a = j[m];
if (1 === a.nodeType) {
a.style.overflow = "visible";
a.style.WebkitTransformStyle = "preserve-3d";
a.style.WebkitTransform = "translateZ(" + (b + (n - m) * q).toFixed(3) + "px)";
var h = d, i = f;
a.offsetParent === k && (h += k.offsetLeft, i += k.offsetTop);
o(a, c + 1, h, i);
e += l(h + a.offsetLeft, i + a.offsetTop, (c + 1) * b, a.offsetWidth, b, 0, g[c % (g.length - 1)]);
e += l(h + a.offsetLeft + a.offsetWidth, i + a.offsetTop, (c + 1) * b, a.offsetHeight, b, 270, g[c % (g.length - 1)]);
e += l(h + a.offsetLeft, i + a.offsetTop + a.offsetHeight, (c + 1) * b, a.offsetWidth, b, 0, g[c % (g.length - 1)]);
e += l(h + a.offsetLeft, i + a.offsetTop, (c + 1) * b, a.offsetHeight, b, 270, g[c % (g.length - 1)])
}
}
}
var g = "#C33,#ea4c88,#663399,#0066cc,#669900,#ffcc33,#ff9900,#996633".split(",");
var q = 0.001;
var e = "";
d = document.body;
d.style.overflow = "visible";
d.style.WebkitTransformStyle = "preserve-3d";
d.style.WebkitPerspective = p;
var r = (window.innerWidth / 2).toFixed(2);
var s = (window.innerHeight / 2).toFixed(2);
d.style.WebkitPerspectiveOrigin = d.style.WebkitTransformOrigin = r + "px" + s + "px";
o(d, 0, 0, 0);
var f = document.createElement("DIV");
f.style.display = "none";
f.style.position = "absolute";
f.style.top = 0;
f.innerHTML = e;
d.appendChild(f);
var j = "NO_FACES";
document.addEventListener("mousemove", function (b) {
if ("DISABLED" !== j) {
var c = b.screenX / screen.width, b = (360 * (1 - b.screenY / screen.height) - 180).toFixed(2), c = (360 * c - 180).toFixed(2);
d.style.WebkitTransform = "rotateX(" + b + "deg)rotateY(" + c + "deg)"
}
}, !0);
document.addEventListener("mouseup", function () {
switch (j) {
case "NO_FACES": j = "FACES";
f.style.display = "";
break;
case "FACES": j = "NO_FACES", f.style.display = "none"
}
}, !0)
} (25, 5E3);
</script>
