8,9d7
<     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)';
11c9
<       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateX(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
---
>       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateX(' + document.getElementById('degval').value + 'deg);  </style>';
13,14d10
<       document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
<       document.getElementById('mydet').style.display='block';
16c12
<       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateY(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
---
>       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateY(' + document.getElementById('degval').value + 'deg);  </style>';
18,19d13
<       document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
<       document.getElementById('mydet').style.display='block';
21c15
<       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateZ(' + document.getElementById('degval').value + 'deg); } </style>' + String.fromCharCode(10);
---
>       document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + ' {  transform: rotateZ(' + document.getElementById('degval').value + 'deg);  </style>';
23,132d16
<       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';
134d17
<     if (newval != '') { document.getElementById('degval').value=newval.split('.')[0]; }
142,144c25,27
< <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>
---
> <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></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;"><br><br><br>My Outline is Purple</div>
>