<html>
<head>
<title>Rotations in 3D - RJM Programming - August, 2026 ... thanks to https://www.w3schools.com/css/css3_3dtransforms.asp</title>

<script type=text/javascript>

function anal(osel) {
var newval='', pmore='', pblurb='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + document.getElementById('degval').value + 'deg) ' + pmore + '; </style>';
var sugblurb=') rotateY(' + document.getElementById('degval').value + 'deg) rotateZ(' + document.getElementById('degval').value + 'deg)';
if (osel.value == 'X') {
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'Y') {
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateY(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'Z') {
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateZ(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'XY') {
pblurb=pblurb.replace('X','X');
sugblurb=sugblurb.replace('Y','Y').split(' r')[0];
pmore=prompt('Please enter 3D rotation in Y in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'XZ') {
pblurb.replace('X','X');
sugblurb=sugblurb.replace('Y','Z').split(' r')[0];
pmore=prompt('Please enter 3D rotation in Z in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'YX') {
pblurb=pblurb.replace('X','Y');
sugblurb=sugblurb.replace('Y','X').split(' r')[0];
pmore=prompt('Please enter 3D rotation in X in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateY(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'YZ') {
pblurb=pblurb.replace('X','Y');
sugblurb=sugblurb.replace('Y','Z').split(' r')[0];
pmore=prompt('Please enter 3D rotation in Z in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateY(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'ZX') {
pblurb=pblurb.replace('X','Z');
sugblurb=sugblurb.replace('Y','X').split(' r')[0];
pmore=prompt('Please enter 3D rotation in X in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateZ(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'ZY') {
pblurb=pblurb.replace('X','Z');
sugblurb=sugblurb.replace('Y','Y').split(' r')[0];
pmore=prompt('Please enter 3D rotation in Y in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 1) { newval=pmore.split(',')[0]; pmore=pmore.split(',')[eval(-1 + pmore.split(',').length)]; } pmore=sugblurb.substring(1).split(' r')[0].replace(document.getElementById('degval').value, pmore); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateZ(' + document.getElementById('degval').value + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'XYZ') {
pblurb=pblurb.replace('X','X');
sugblurb=sugblurb.replace('Y','Y').replace('Z','Z');
pmore=prompt('Please enter 3D rotations in Y,Z in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value + ',' + document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + 'deg)', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'XZY') {
pblurb=pblurb.replace('X','X');
sugblurb=sugblurb.replace('Y','@').replace('Z','Y').replace('@','Z');
pmore=prompt('Please enter 3D rotations in Z,Y in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value + ',' + document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + 'deg)', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateX(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'YXZ') {
pblurb=pblurb.replace('X','Y');
sugblurb=sugblurb.replace('Y','X');
pmore=prompt('Please enter 3D rotations in X,Z in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value + ',' + document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + 'deg)', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateY(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'YZX') {
pblurb=pblurb.replace('X','Y');
sugblurb=sugblurb.replace('Y','@').replace('Z','X').replace('@','Z');
pmore=prompt('Please enter 3D rotations in Z,X in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value + ',' + document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + ')', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + ')', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateY(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'ZXY') {
pblurb=pblurb.replace('X','Z');
sugblurb=sugblurb.replace('Y','@').replace('Z','Y').replace('@','X');
pmore=prompt('Please enter 3D rotations in X,Y in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + 'deg)', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateZ(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
} else if (osel.value == 'ZYX') {
pblurb=pblurb.replace('X','Z');
sugblurb=sugblurb.replace('Z','X');
pmore=prompt('Please enter 3D rotations in Y,X in degrees which if defaulted will result in ... ' + String.fromCharCode(10) + String.fromCharCode(10) + pblurb.replace(')', sugblurb) + String.fromCharCode(10) + String.fromCharCode(10) + ' ... ?', document.getElementById('degval').value + ',' + document.getElementById('degval').value);
if (pmore == null) { pmore=''; } else { if (eval('' + pmore.split(',').length) > 2) { newval=pmore.split(',')[0]; pmore=pmore.replace(pmore.split(',')[0] + ',', ''); } pmore=sugblurb.substring(1).replace(document.getElementById('degval').value + 'deg)', pmore.split(',')[0].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)').replace(document.getElementById('degval').value + 'deg)', (pmore + ',' + pmore).split(',')[1].split('.')[0] + '.0deg)'); }
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' { transform: rotateZ(' + (newval != '' ? newval : document.getElementById('degval').value) + 'deg) ' + pmore + '; } </style>' + String.fromCharCode(10);
osel.value='';
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
}
if (newval != '') { document.getElementById('degval').value=newval.split('.')[0]; }
}

</script>
</head>
<body>
<h1 id=myh1>Rotations in 3D</h1>
<h3 id=myh3>RJM Programming - August, 2026 ... thanks to <a target=_blank href='https://www.w3schools.com/css/css3_3dtransforms.asp'>W3schools</a></h3>
<p id=myp>Rotate in <select id=selxyz onchange=anal(this);><option value=''></option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option><option value='XY'>X then Y</option><option value='XZ'>X then Z</option><option value='YX'>Y then X</option><option value='YZ'>Y then Z</option><option value='ZX'>Z then X</option><option value='ZY'>Z then Y</option><option value='XYZ'>X then Y then Z</option><option value='XZY'>X then Z then Y</option><option value='YXZ'>Y then X then Z</option><option value='YZX'>Y then Z then X</option><option value='ZXY'>Z then X then Y</option><option value='ZYX'>Z then Y then X</option></select> to <select id=selthing><option value='div'>div</option><option value='p'>p</option><option value='h1'>h1</option><option value='h3'>h3</option></select> by <input id=degval type=number step=1 value=45 min=0 max=360></input> degrees</p>
<div id=dtop contenteditable=true onblur=remember(this); title="Editable, with purple outline, by default" style="background-color:white;width:33%;height:33%;position:absolute;top:33%;left:33%;display:inline-block;border:2px dotted green;outline:34px solid purple;text-align:center;opacity:0.7;"><br><br><br>My Outline is Purple</div>
<details id=mydet style=display:none;width:95%;><summary id=mysum>CSS Styling for 3D Rotations</summary><textarea id=myta style=width:90%;height:500px;></textarea></details>
<div id=dstyle></div>
</body>
</html>