<!doctype HTML>
<html>
<head>
<title>CSS3 3D Rotation - RJM Programming - November, 2014</title>
<style>
.transform {
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
}
.rotate {
-webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
transform: rotateX(0deg);
}
</style>
<script type='text/javascript'>
var previs = "youllneverfindthis";
var xrot = 0, yrot = 0, prevxrot = 0, prevyrot = 0;
var which = " ";
var twhich = " ";
function tdoit(tv) {
if (tv.length == 1) {
twhich = tv;
setTimeout(doagain, 1000);
} else {
if (tv.indexOf(" ") == -1) twhich = " ";
var ifneg = 0, dh;
var shuh = document.head.getElementsByTagName("style");
var css = shuh[shuh.length - 1].innerHTML;
var dimis = tv.substring(0,1).toUpperCase();
var degis = tv.substring(1).replace(" ","");
//if (dimis == "X") {
//ifneg = eval(degis - prevxrot);
css = css.replace(/1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1/gi, tv.replace("matrix3d","").replace(")","").replace("(","").replace(/ /gi,""));
//} else {
//ifneg = eval(degis - prevyrot);
//css = css.replace(/0/gi, degis).replace(/X/gi, dimis);
//}
var partcss = css.split("{");
var pxcss = partcss[1].replace("/* Chrome, Safari, Opera */","").replace("\n"," ").split("}");
var xcx = pxcss[0].replace("transform: ","transform:").split(";");
var atxcx = xcx[1].replace("transform: ","transform:").split(";");
//alert(xcx[1]);
var txcx = atxcx[0].split(" ");
//var btxcx = xcx[2].replace("transform: ","transform:").split(";");
//alert(xcx[1]);
//var btxcx = btxcx[0].split(" ");
var pcss = xcx[0] + "; " + txcx[txcx.length - 1] + "; "; // + btxcx[btxcx.length - 1] + "; ";
//alert(pcss);
var dhuh = document.getElementsByClassName("transform");
var donehuh;
var ii;
var wcolours = ['Red','Green','Blue','Silver','Gray','Maroon','Yellow','Olive','Lime','Aqua','Teal','Navy','Fuchsia','Purple'];
for (ii=0; ii<dhuh.length; ii++) {
//alert(dhuh[ii].id + " " + pcss[0]);
donehuh = document.getElementById(dhuh[ii].id.replace('t', 'x'));
if (ifneg < 0) {
if (ii == 0) document.getElementById('xbod').style.backgroundColor = wcolours[(Math.floor(Math.random() * wcolours.length) + 0)];
dh = donehuh.innerHTML.replace("1.jpg",".jpg").replace("2.jpg",".jpg").replace("3.jpg",".jpg").replace("4.jpg",".jpg").replace("5.jpg",".jpg").replace("6.jpg",".jpg");
//alert(dh);
donehuh.innerHTML = dh.replace(".jpg", (Math.floor(Math.random() * 5) + 1) + ".jpg");
//alert(donehuh.innerHTML);
}
donehuh.innerHTML = donehuh.innerHTML.replace(previs, "").replace("<div ", "<div style='" + pcss + "' ");
//alert(donehuh.innerHTML);
}
previs = " style='" + pcss + "' ";
}
}
function doit(tv) {
if (tv.length == 1) {
which = tv;
setTimeout(doagain, 1000);
} else {
if (tv.indexOf(" ") == -1) which = " ";
var ifneg = 0, dh;
var shuh = document.head.getElementsByTagName("style");
var css = shuh[shuh.length - 1].innerHTML;
var dimis = tv.substring(0,1).toUpperCase();
var degis = tv.substring(1).replace(" ","");
if (dimis == "X") {
ifneg = eval(degis - prevxrot);
css = css.replace(/0/gi, degis).replace(/X/gi, dimis);
} else {
ifneg = eval(degis - prevyrot);
css = css.replace(/0/gi, degis).replace(/X/gi, dimis);
}
var partcss = css.split("{");
var pxcss = partcss[2].replace("/* Chrome, Safari, Opera */","").replace("\n"," ").split("}");
var xcx = pxcss[0].replace("transform: ","transform:").split(";");
var atxcx = xcx[1].replace("transform: ","transform:").split(";");
//alert(xcx[1]);
var txcx = atxcx[0].split(" ");
var pcss = xcx[0] + "; " + txcx[txcx.length - 1] + "; ";
var dhuh = document.getElementsByClassName("rotate");
var donehuh;
var ii;
var wcolours = ['Red','Green','Blue','Silver','Gray','Maroon','Yellow','Olive','Lime','Aqua','Teal','Navy','Fuchsia','Purple'];
for (ii=0; ii<dhuh.length; ii++) {
//alert(dhuh[ii].id + " " + pcss[0]);
donehuh = document.getElementById(dhuh[ii].id.replace('t', 'x'));
if (ifneg < 0) {
if (ii == 0) document.getElementById('xbod').style.backgroundColor = wcolours[(Math.floor(Math.random() * wcolours.length) + 0)];
dh = donehuh.innerHTML.replace("1.jpg",".jpg").replace("2.jpg",".jpg").replace("3.jpg",".jpg").replace("4.jpg",".jpg").replace("5.jpg",".jpg").replace("6.jpg",".jpg");
//alert(dh);
donehuh.innerHTML = dh.replace(".jpg", (Math.floor(Math.random() * 5) + 1) + ".jpg");
//alert(donehuh.innerHTML);
}
donehuh.innerHTML = donehuh.innerHTML.replace(previs, "").replace("<div ", "<div style='" + pcss + "' ");
//alert(donehuh.innerHTML);
}
previs = " style='" + pcss + "' ";
}
}
function doagain() {
if (which == "X") {
xrot = eval((xrot + 5) % 360);
doit(which + xrot + " ");
prevxrot = xrot;
setTimeout(doagain, 1000);
} else if (which == "Y") {
yrot = eval((yrot + 5) % 360);
doit(which + yrot + " ");
prevyrot = yrot;
setTimeout(doagain, 1000);
} else if (which == "x") {
xrot = eval((xrot + 25) % 360);
doit(which.toUpperCase() + xrot + " ");
prevxrot = xrot;
setTimeout(doagain, 1000);
} else if (which == "y") {
yrot = eval((yrot + 25) % 360);
doit(which.toUpperCase() + yrot + " ");
prevyrot = yrot;
setTimeout(doagain, 1000);
}
}
</script>
</head>
<body align='center' style='background-color:teal;' id='xbod'>
<h1 align='center' id='myh1'>CSS3 3D Rotation ... </h1><h3 align='center'><a href='#' title='Toggle top view' onclick=' document.getElementById("tabrot").style.display = document.getElementById("tabrot").style.display.replace("none","BLOCK").replace("block","NONE").replace("BLOCK","block"); this.innerHTML = this.innerHTML.replace("Transformation","ROTATION").replace("Rotation","Transformation").replace("ROTATION","Rotation"); '>Transformation</a></h3>
<div align='center'>
<table id='tabrot' align='center' style='display:block;'>
<tr>
<td id='x11'><div class='rotate' id='t11'><img style="border:5px green solid;width:400px;height:266px;" src='NalaAtPlay1.jpg' title='i11' id='i11' /></div></td><td></td><td id='x13'><div class='rotate' id='t13'><img style="border:5px green solid;width:400px;height:266px;" src='NalaAtPlay2.jpg' title='i13' id='i13' /></div></td>
</tr><tr>
<td></td><td><div class='sel' id='t22'><select id='mysel' onchange='doit(this.value);'><option value="">Optionally select a 3D rotational effect as below ...</option><option value="X">Rotate in X</option><option value="Y">Rotate in Y</option><option value="x">Rotate in X faster</option><option value="y">Rotate in Y faster</option><option value="X90">Rotate in X 90 degrees</option><option value="Y90">Rotate in Y 90 degrees</option><option value="X120">Rotate in X 120 degrees</option><option value="Y120">Rotate in Y 120 degrees</option><option value="X150">Rotate in X 150 degrees</option><option value="Y150">Rotate in Y 150 degrees</option><option value="X180">Rotate in X 180 degrees</option><option value="Y180">Rotate in Y 180 degrees</option><option value="X210">Rotate in X 210 degrees</option><option value="Y210">Rotate in Y 210 degrees</option><option value="X240">Rotate in X 240 degrees</option><option value="Y240">Rotate in Y 240 degrees</option><option value="X270">Rotate in X 270 degrees</option><option value="Y270">Rotate in Y 270 degrees</option></select></select></td><td></td>
</tr><tr>
<td id='x31'><div class='rotate' id='t31'><img style="border:5px green solid;width:400px;height:266px;" src='NalaAtPlay3.jpg' title='i31' id='i31' /></div></td><td></td><td id='x33'><div class='rotate' id='t33'><img style="border:5px green solid;width:400px;height:266px;" src='NalaAtPlay4.jpg' title='i33' id='i33' /></div></td>
</tr>
</table>
</div>
<hr>
<h1 align='center' id='myth1'>CSS3 3D Transformation</h1><h3 align='center'> ... thanks to <a target=_blank title='' href='http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/' title='Franklin Ta blog ... brilliant'>Computing CSS matrix3d transforms | Franklin Ta</a></h3>
<table id='tabtrans' align='center' cellpadding=35 cellspacing=35>
<tr>
<td id='x011'><div class='transform' id='t011'><img style="border:5px green solid;" src='NalaAtPlay1.jpg' title='i011' id='i011' /></div></td><td></td><td id='x013'><div class='transform' id='t013'><img style="border:5px green solid;" src='NalaAtPlay2.jpg' title='i013' id='i013' /></div></td>
</tr><tr>
<td></td><td><div class='tsel' id='t022'><select id='mytsel' onchange='tdoit(this.value);'><option value="">Optionally select a 3D transformational effect as below ...</option><option value="matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)">No Transformation</option><option value="matrix3d(0.8954156642608928,-0.032567049808429116,0,-0.00018934331283970417,-0.01744186046511628,0.8954156642608929,0,-0.000033413525795241913,0,0,1,0,3,17,0,1)">Bit Skewy</option><option value="matrix3d(0.8341014549507225,-0.032567049808429116,0,-0.00030680348393198435,-0.01744186046511628,1.5678919237886382,0,0.0038763321691335094,0,0,1,0,3,17,0,1)">More Skewy</option><option value="matrix3d(0.020987494450199803,-0.032567049808429116,0,-0.0018644930634349015,-0.01589168080646771,-0.03262239245433645,0,-0.005592499251422297,0,0,1,0,3,17,0,1)">Very Weird</option><option value="matrix3d(-0.27020248002574293,-0.032567049808429116,0,-0.0024223282635803855,2.095690562218636,0.4268176222110457,0,0.004699143141895332,0,0,1,0,3,17,0,1)">Peculiarly Refreshing</option><option value='matrix3d(0.24337082360472406,0.005747126436781609,0,-0.0004866111822241385,-1.505995410232724,0.49670619469917043,0,-0.0030436394176550172,0,0,1,0,262.3666687011719,-3,0,1)'>Rhom Bussy</option><option value='matrix3d(1.224591266707613,0.0038509159330428083,0,0.00000974915426086787,0.01746904839451433,2.3000913719443865,0,0.000009062643132683154,0,0,1,0,0,0,0,1)'>Pretty Square, Man</option></select></select></td><td></td>
</tr><tr>
<td id='x031'><div class='transform' id='t031'><img style="border:5px green solid;" src='NalaAtPlay3.jpg' title='i031' id='i031' /></div></td><td></td><td id='x033'><div class='transform' id='t033'><img style="border:5px green solid;" src='NalaAtPlay4.jpg' title='i033' id='i033' /></div></td>
</tr>
</table>
</body>
</html>