{"id":52006,"date":"2021-03-26T03:01:49","date_gmt":"2021-03-25T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52006"},"modified":"2024-09-08T16:54:27","modified_gmt":"2024-09-08T06:54:27","slug":"css-3d-transformation-matrix-windows-snip-and-sketch-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-windows-snip-and-sketch-tutorial\/","title":{"rendered":"CSS 3D Transformation Matrix Windows Snip and Sketch Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Windows Snip and Sketch Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snip_and_sketch.gif\" title=\"CSS 3D Transformation Matrix Windows Snip and Sketch Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Windows Snip and Sketch Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='CSS 3D Transformation Matrix Share Tutorial' href='#css3dtmst'>CSS 3D Transformation Matrix Share Tutorial<\/a> said &#8230;<\/p>\n<blockquote cite=''><p>\nUp to yesterday&#8217;s <a title='CSS 3D Transformation Matrix Mobile Mousemove Tutorial' href='#css3dtmmmt'>CSS 3D Transformation Matrix Mobile Mousemove Tutorial<\/a> sharing and\/or collaboration was up to the user taking their own screenshots and perhaps communicating that information themselves.\n<\/p><\/blockquote>\n<p>And so, today, we backtrack a little to show one of those web browser helpers, the brilliant Windows 10 desktop application called <a target=\"_blank\" title='Snip and Sketch' href='https:\/\/support.microsoft.com\/en-us\/windows\/how-to-take-and-annotate-screenshots-on-windows-10-ca08e124-cc30-2579-3e55-6db63e36fbb9' rel=\"noopener\">&#8220;Snip and Sketch&#8221;<\/a>, <i>the independent of your work<\/i> &#8220;screenshotter&#8221; of your activity for the entire Windows screen in these modes of screenshotting &#8230;<\/p>\n<ul>\n<li>Rectangular Snip<\/li>\n<li>Freeform Snip<\/li>\n<li>Window Snip<\/li>\n<li>Fullscreen Snip<\/li>\n<\/ul>\n<p>In today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snip_and_sketch.gif\" title=\"Tutorial picture\" rel=\"noopener\">animated GIF<\/a> presentation related to some of this Windows 10 screenshotting, you can see lots of &#8220;Rectangular Snip&#8221; generic testing and a specific &#8220;Freeform Snip&#8221; example related to our recent <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">CSS 3D Transformation Matrix web application<\/a> of recent postings.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-windows-snip-and-sketch-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Windows Snip and Sketch Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmst'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-share-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Share Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform_share.jpg\" title=\"CSS 3D Transformation Matrix Share Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Share Tutorial<\/p><\/div>\n<p>Up to yesterday&#8217;s <a title='CSS 3D Transformation Matrix Mobile Mousemove Tutorial' href='#css3dtmmmt'>CSS 3D Transformation Matrix Mobile Mousemove Tutorial<\/a> sharing and\/or collaboration was up to the user taking their own screenshots and perhaps communicating that information themselves.   Today we make sharing that little bit easier with the inclusion of a new emoji &#128231; &#8220;button&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;h4 id=mybemail ondblclick=\"this.style.display='none';\" title='Email snapshot (double click makes this emoji disappear)' style='display:none;' onclick=emailsnapshot();&gt;&amp;#128231;&lt;\/h4&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; see how emoji usage can make so many HTML element types into pseudo &#8220;button&#8221; types.<\/p>\n<p>The two sharing &#8220;conduits&#8221; we programmatically cater for are &#8230;<\/p>\n<table>\n<tr>\n<th>Conduit type<\/th>\n<th>&#8220;a&#8221; link clicked with long URL<\/th>\n<th>Attachment<\/th>\n<th>Inline HTML<\/th>\n<\/tr>\n<tr>\n<td>Email<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<td>No<br \/>(alas, no client<br \/>liked the HTML)<\/td>\n<\/tr>\n<tr>\n<td>SMS<\/td>\n<td>Yes<br \/>(but not if<br \/>background images<br \/>involved)<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; using the new Javascript function code that uses a couple of &#8220;midair techniques&#8221; &#8230;<\/p>\n<ol>\n<li><a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a>\/<a target=\"_blank\" title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData' rel=\"noopener\">FormData<\/a><\/li>\n<li><a target=\"_blank\" title='createElement information from W3schools ... thanks' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp' rel=\"noopener\">document.createElement<\/a>\/<a target=\"_blank\" title='click method information from W3schools ... thanks' href='https:\/\/www.w3schools.com\/jsref\/met_html_click.asp#:~:text=The%20click()%20method%20simulates,user%20manually%20clicked%20on%20it.' rel=\"noopener\">click()<\/a><\/li>\n<\/ol>\n<p> &#8230; in &#8230;<\/p>\n<p><code><br \/>\n  function emailsnapshot() {<br \/>\n  var tois=gtois.trim(), zbigstr='', zs='';<br \/>\n  var smssuffix='', plussms='';<br \/>\n  var wastitle='' + document.getElementById('img').title;<br \/>\n  document.getElementById('img').title='';<br \/>\n  if (eval('' + encodeURIComponent(document.getElementById('img').outerHTML.split(' contenteditable=')[0] + ' contenteditable=\"true\"&gt;' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument) + '&lt;\/div&gt;').length) &lt; 800) {<br \/>\n    smssuffix=', and all integers will SMS';<br \/>\n    plussms=' or SMS';<br \/>\n    if (tois.trim() != '' && tois.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n      zs='@';<br \/>\n    }<br \/>\n  }<br \/>\n  if ((tois + zs).indexOf('@') == -1) {<br \/>\n    \/\/gtois=prompt('Please enter email address to send to?  (just @ will show and ask via a popup window and all uppercase will use an inline HTML technique rather than an HTML file attachment)', '');<br \/>\n    if (optionally) {<br \/>\n    \/\/optionally=false;<br \/>\n    if (gtois == '') {<br \/>\n    gtois=prompt('Optionally enter email address to send to?  (just @ will show and ask via a popup window, and just - will not ask again' + smssuffix + ')', '');<br \/>\n    }<br \/>\n    } else {<br \/>\n    gtois=prompt('Please enter email address to send to?  (just @ will show and ask via a popup window, and just - will hide this emoji' + smssuffix + ')', '');<br \/>\n    }<br \/>\n    if (gtois == null) { gtois=''; }<br \/>\n    tois=gtois;<br \/>\n  }<br \/>\n  if (tois == '-') {<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  gtois=' ';<br \/>\n  } else {<br \/>\n  gtois='';<br \/>\n  }<br \/>\n  document.getElementById('mybemail').style.display='none';<br \/>\n  document.getElementById('img').title=wastitle;<br \/>\n  return '';<br \/>\n  } else if (tois == '@') {<br \/>\n  gtois='';<br \/>\n  document.getElementById('mybemail').style.display='none';<br \/>\n  zbigstr='&lt;html&gt;&lt;head&gt;' + document.head.innerHTML.split('&lt;scr')[0].replace('&lt;\/style&gt;', ' .ui-draggable { visibility:hidden; } &lt;\/style&gt;') + '&lt;\/head&gt;' + document.body.outerHTML.replace(\/\\&quot\\;\/g,\"'\").replace('&lt;\/h4&gt;','&lt;\/h4&gt;&nbsp;&lt;input style=display:inline-block; placeholder=\"Email' + plussms + ' address to send to\" type=text value=\"\" onblur=\" window.opener.document.getElementById(' + \"'result'\" + ').innerHTML=this.value; \"&gt;&lt;\/input&gt;') + '&lt;\/html&gt;';<br \/>\n  wois=window.open('','_blank','top=30,left=30,width=500,height=500');<br \/>\n  wois.document.write(zbigstr);<br \/>\n  document.getElementById('img').title=wastitle;<br \/>\n  return '';<br \/>\n  } else if (tois.indexOf('@') == -1) {<br \/>\n  if (tois.trim() != '' && tois.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n  var elea=document.createElement('a');<br \/>\n  elea.target='_blank';<br \/>\n  elea.href='sms:' + tois + '&body=' + ourencodeURIComponent(encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?imgoh=' + encodeURIComponent(document.getElementById('img').outerHTML.split(' contenteditable=')[0] + ' contenteditable=\"true\"&gt;' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument) + '&lt;\/div&gt;')));<br \/>\n  elea.click();<br \/>\n  }<br \/>\n  document.getElementById('img').title=wastitle;<br \/>\n  return '';<br \/>\n  }<br \/>\n  document.getElementById('mybemail').style.display='none';<br \/>\n  zbigstr='&lt;html&gt;&lt;head&gt;' + document.head.innerHTML.split('&lt;scr')[0].replace('&lt;\/style&gt;', ' .ui-draggable { visibility:hidden; } &lt;\/style&gt;') + '&lt;\/head&gt;' + document.body.outerHTML.replace(\/\\&quot\\;\/g,\"'\") + '&lt;\/html&gt;';<br \/>\n <br \/> <br \/>\n  var zzhr = new XMLHttpRequest();<br \/>\n  var zzform=new FormData();<br \/>\n  zzform.append('to', tois);<br \/>\n  zzform.append('subj', 'My 3D Transformed Webpage');<br \/>\n  if (tois == tois.toUpperCase() && 1 == 7) {<br \/>\n  zzform.append('inline', '');<br \/>\n  }<br \/>\n  zzform.append('tdhuhta', encodeURIComponent(zbigstr));<br \/>\n  zzhr.open('post', '\/\/www.rjmprogramming.com.au\/PHP\/emailhtml.php', true);<br \/>\n  zzhr.send(zzform);<br \/>\n  if (!gtoviaresult) {<br \/>\n  wois=window.open('','_blank','top=30,left=30,width=500,height=500');<br \/>\n  wois.document.write(zbigstr);<br \/>\n  } else if (wois) {<br \/>\n  wois.close();<br \/>\n  wois=null;<br \/>\n  }<br \/>\n  document.getElementById('mybemail').style.display='inline-block';<br \/>\n  gtoviaresult=false;<br \/>\n  document.getElementById('img').title=wastitle;<br \/>\n  return ' ';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html-----GETME\" title=\"more_transform.html\" rel=\"noopener\">our changed<\/a> web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html-----GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-share-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmmmt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Mobile Mousemove Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-mobile-mousemove-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Mobile Mousemove Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Mobile Mousemove Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform_mobile_mousemove.jpg\" title=\"CSS 3D Transformation Matrix Mobile Mousemove Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Mobile Mousemove Tutorial<\/p><\/div>\n<p>The key to getting mobile platforms take that extra step of allowing the user to drag the div contenteditable=<strike>true<\/strike>false into a 3D transformed element, on top of the progress of yesterday&#8217;s <a title='CSS 3D Transformation Matrix Mobile Tutorial' href='#css3dtmmt'>CSS 3D Transformation Matrix Mobile Tutorial<\/a> centred around the following question &#8230;<\/p>\n<p><code><br \/>\nCan we simulate a mousemove event from a touchmove touch event on a smart device?<br \/>\n<\/code><\/p>\n<p> &#8230; and the answer is &#8220;yes&#8221;, and we&#8217;d recommend you first read <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/5186441\/javascript-drag-and-drop-for-touch-devices' title='Javascript Drag and drop for touch devices' rel=\"noopener\">Javascript Drag and drop for touch devices<\/a> as far as that goes, where the enacted recommendation &#8230;<\/p>\n<p><code><br \/>\nfunction touchHandler(event) {<br \/>\n    var touch = event.changedTouches[0];<br \/>\n<br \/>\n    var simulatedEvent = document.createEvent(\"MouseEvent\");<br \/>\n        simulatedEvent.initMouseEvent({<br \/>\n        touchstart: \"mousedown\",<br \/>\n        touchmove: \"mousemove\",<br \/>\n        touchend: \"mouseup\"<br \/>\n    }[event.type], true, true, window, 1,<br \/>\n        touch.screenX, touch.screenY,<br \/>\n        touch.clientX, touch.clientY, false,<br \/>\n        false, false, false, 0, null);<br \/>\n<br \/>\n    touch.target.dispatchEvent(simulatedEvent);<br \/>\n    event.preventDefault();<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; can dynamically convert all the touchstart, touchend and touchmove events into mouse event equivalents, and then feed into the existant smarts of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html----GETME\" title=\"more_transform.html\" rel=\"noopener\">our changed<\/a> web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html----GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<p>That is good, leaving the touchmove event of the four draggable guides (div that we make bigger and red on mobile platforms) of interest to us to follow up and further amend, as per &#8230;<\/p>\n<p><code><br \/>\n            divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); }   var nevent = new Event('mousemove');  evt.target.dispatchEvent(nevent); evt.preventDefault();  });<br \/>\n<\/code><\/p>\n<p> &#8230; us helping out the &#8220;drag&#8221; with our interrupted &#8220;drop&#8221;.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-mobile-mousemove-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Mobile Mousemove Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmmt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-mobile-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform_mobile.jpg\" title=\"CSS 3D Transformation Matrix Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Mobile Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='CSS 3D Transformation Matrix Browse Tutorial' href='#css3dtmbt'>CSS 3D Transformation Matrix Browse Tutorial<\/a> was not the best as far as mobile platforms went when coming up against sizeable image data sources.<\/p>\n<p>As such, we are going to stop &#8220;recalls&#8221; of our web application when a mobile user takes or browses for an image.  This in turn stops window.sessionStorage being needed, but means we have to move the drag and drop guides ourselves <font color=blue>as per<\/font> &#8230; <\/p>\n<p><code><br \/>\nfunction fixstyle(stih) {<br \/>\n  var idivs=0, boxrect=null, kdivs=0;<br \/>\n  stih=stih.replace(\/\\&amp\\;lt\\;\/g, '&lt;').replace(\/\\&amp\\;gt\\;\/g, '&gt;').replace(\/\\&lt\\;\/g, '&lt;').replace(\/\\&gt\\;\/g, '&gt;');<br \/>\n  \/\/alert('0:' + stih);<br \/>\n  if (stih.indexOf('&lt;style&gt;') != -1 && stih.indexOf('&lt;\/style&gt;') != -1) {<br \/>\n    document.getElementById('dstyle').innerHTML='&lt;style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;';<br \/>\n    \/\/alert('&lt;Style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n    var divs=document.getElementsByTagName('div');<br \/>\n    for (var jdivs=0; jdivs&lt;2; jdivs++) {<br \/>\n    if (kdivs == 0) {<br \/>\n    for (idivs=0; idivs&lt;divs.length; idivs++) {<br \/>\n      if (('' + divs[idivs].className).indexOf('ui-draggable') != -1) {<br \/>\n        if (boxrect) {<br \/>\n          if (kdivs == 0 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.left) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.top) + 'px';<br \/>\n          } else if (kdivs == 1 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.left) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.bottom) + 'px';<br \/>\n          } else if (kdivs == 2 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.right) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.top) + 'px';<br \/>\n          } else if (kdivs == 3 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.right) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.bottom) + 'px';<br \/>\n            \/\/alert('&lt;stylE&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n            location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('&lt;style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n          } <font color=blue>else if (kdivs == 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';<br \/>\n            divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';<br \/>\n            divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dotted'; }, { passive: false });<br \/>\n          } else if (kdivs == 1 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';<br \/>\n            divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';<br \/>\n            divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dashed'; }, { passive: false });<br \/>\n          } else if (kdivs == 2 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';<br \/>\n            divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';<br \/>\n            divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='double'; }, { passive: false });<br \/>\n          } else if (kdivs == 3 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';<br \/>\n            divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';<br \/>\n            divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='groove'; }, { passive: false });<br \/>\n            \/\/alert('&lt;stylE&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n            if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n            location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('&lt;style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n            } else {<br \/>\n            \/\/alert('' + window.scrollY + ' ' + boxrect.left + ' ' + boxrect.width + ' ...      Left=' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + ' top=' + '' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px');<br \/>\n            noscrollbutzoom(); \/\/document.getElementById('resultav').innerHTML+=\"&lt;script&gt; document.body.addEventListener('touchstart', function(e){ e.preventDefault(); }); &lt;\/s\" + \"cript&gt; \";<br \/>\n            }<br \/>\n          }<\/font><br \/>\n        }<br \/>\n      } else if (('' + divs[idivs].className).indexOf('box') != -1 && !boxrect) {<br \/>\n        boxrect=divs[idivs].getBoundingClientRect();<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  } \/\/else {<br \/>\n    \/\/alert(stih);<br \/>\n  \/\/}<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Also for mobile platforms, on browsing for an image, we are going to try, on our div contenteditable=true &#8230;<\/p>\n<ul>\n<li>remove the contenteditable attribute<\/li>\n<li>stop scrolling on div (but allow around it)<\/li>\n<li>stop zoom on div (but allow around it)<\/li>\n<li>start down the road for mobile users seeing events for those drag and drop guides<\/li>\n<\/ul>\n<p> &#8230; as per &#8230;<\/p>\n<p><code><br \/>\nfunction noscrollbutzoom() {<br \/>\n  document.getElementById('img').addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });<br \/>\n  document.getElementById('img').addEventListener('touchdown', function(e){ e.preventDefault(); }, { passive: false });<br \/>\n  document.getElementById('img').style.marginRight='50px';<br \/>\n  document.getElementById('img').removeAttribute('contenteditable');<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Again, we figure it&#8217;s worth you (re)trying this HTML and Javascript (mostly jQuery) and CSS <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html---GETME\" title=\"more_transform.html\" rel=\"noopener\">more mobile user controllable and user controlled image data selection<\/a> web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html---GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to see what we mean?<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-mobile-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmbt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Browse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-browse-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Browse Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Browse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform_browse.jpg\" title=\"CSS 3D Transformation Matrix Browse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Browse Tutorial<\/p><\/div>\n<p>When we mentioned in <a title='CSS 3D Transformation Matrix Tool Tutorial' href='#css3dtmtt'>CSS 3D Transformation Matrix Tool Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-tool-tutorial\/'><p>\nWe have bigger plans than this.  Perhaps you can guess the direction we might go next?!\n<\/p><\/blockquote>\n<p> &#8230; we had in mind what is involved with today&#8217;s tutorial topic, but our day&#8217;s coding started with another direction we&#8217;re keen on seeing whether we can see it through <font size=1>(alas not today)<\/font>, that being &#8230;<\/p>\n<ul>\n<li>allow mobile platforms work the drag and drop logic of the web application &#8230; and so the code changes start this but also consider today&#8217;s nominal &#8230;<\/li>\n<li>allow images be defined not only via &#8230;\n<ol>\n<li>image textbox entered image URL &#8230; but also by, as of today &#8230;<\/li>\n<li>image browsed for either as an existant local device image file, or, as in the case for a smart device, take the image photo there and then and use it with that &#8220;Apply Below&#8221; button to establish 3D transformable background images<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>You may recall yesterday introduced &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-tool-tutorial\/'>\n<ul>\n<li>background-repeat:no-repeat;<\/li>\n<li>background-size:cover;<\/li>\n<li>background-size:contain;<\/li>\n<li>elements above become <i>style=&#8217;visibility:hidden;&#8217;<\/i> (as required)<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; also, respective requiring URL suffixes of &#8230;<\/p>\n<ul>\n<li>single space<\/li>\n<li>three spaces<\/li>\n<li>two spaces<\/li>\n<li>before any spaces the use of a hash (#) character near the end of the URL<\/li>\n<\/ul>\n<p>?  Well, we have this special combination below quickly getting us to an &#8220;image transforming editor&#8221; piece of functionality we are quite fond of.  Should the user &#8230;<\/p>\n<ol>\n<li>append three spaces to an initially presented image URL in that textbox &#8230; then &#8230;<\/li>\n<li>click the new &#8220;Choose File&#8221; browsing button and select an image file of choice(or take that image photo then and then on a smart device) &#8230; then &#8230;<\/li>\n<li>inhouse, the web application clicks the &#8220;Apply Below&#8221; button for you causing a <i>windows.sessionStorage<\/i> saving (adding a hash (#) even if not specified) of the resultant image data URI be stored, and in the meantime determine the width and height of that image data URI data, apply it in that div contenteditable=true CSS styling place ahead of that programmatic &#8220;Apply Below&#8221; button programmatic click, causing a reload whose document.body &#8220;short time after&#8221; onload event re-establishes the data URI in the textbox and reclicks the &#8220;Apply Below&#8221; button, to end up with the user being presented with our &#8220;image transforming editor&#8221; piece of functionality in action, awaiting user drags and drops to transform the box (and its underlying background-size:cover; with image dimensions (equivalent to background-size:contain;)) completely covered by image data, so that the user just sees a transformable image under their complete control<\/li>\n<\/ol>\n<p>Kludgy, so far, but lots of scope to make it less kludgy as time goes on.<\/p>\n<p>We figure it&#8217;s worth you (re)trying this HTML and Javascript (mostly jQuery) and CSS <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html--GETME\" title=\"more_transform.html\" rel=\"noopener\">more user controllable and user controlled image data selection<\/a> web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html--GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to see what we mean?<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-browse-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Browse Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmtt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Tool Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-tool-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Tool Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Tool Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/transform_matrix_tailored.jpg\" title=\"CSS 3D Transformation Matrix Tool Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Tool Tutorial<\/p><\/div>\n<p>The <a target=\"_blank\" title='Thanks' href='http:\/\/franklinta.com\/2014\/09\/08\/computing-css-matrix3d-transforms\/' rel=\"noopener\">brilliance of others, thanks<\/a>, and of <a target=\"_blank\" title='Javascript jQuery library' href='https:\/\/jquery.com\/' rel=\"noopener\">jQuery<\/a>, thanks, were behind the &#8220;proof of concept&#8221; feel to the <a title='CSS 3D Transformation Matrix Primer Tutorial' href='#css3dtmpt'>CSS 3D Transformation Matrix Primer Tutorial<\/a> &#8220;CSS 3D Transformation Matrix&#8221; topic we are revisiting today.<\/p>\n<p>Today, practicalities and usefulness, and the development of a user controlled set of outputs, take over our thoughts.<\/p>\n<p>On a revisit, as a start, we wondered whether &#8230;<\/p>\n<ol>\n<li>we could make the styling of the initial HTML div &#8220;box&#8221; element styling user definable<\/li>\n<li>we could make the background image CSS properties &#8230;\n<ul>\n<li>background-repeat:no-repeat;<\/li>\n<li>background-size:cover;<\/li>\n<li>background-size:contain;<\/li>\n<li>elements above become <i>style=&#8217;visibility:hidden;&#8217;<\/i> (as required)<\/li>\n<\/ul>\n<p> &#8230; be user definable\n<\/li>\n<\/ol>\n<p> &#8230; and the answers are &#8220;yes&#8221; and &#8220;ya&#8221; &#8230;<\/p>\n<ol>\n<li>we could make the styling of the initial HTML div &#8220;box&#8221; element styling user definable &#8230; <font color=blue>keeping the jQuery happy by refreshing when user changes the styling<\/font> &#8230;<br \/>\n<code><br \/>\nfunction fixstyle(stih) {<br \/>\n  var idivs=0, boxrect=null, kdivs=0;<br \/>\n  stih=stih.replace(\/\\&amp\\;lt\\;\/g, '&lt;').replace(\/\\&amp\\;gt\\;\/g, '&gt;').replace(\/\\&lt\\;\/g, '&lt;').replace(\/\\&gt\\;\/g, '&gt;');<br \/>\n  \/\/alert('0:' + stih);<br \/>\n  if (stih.indexOf('&lt;style&gt;') != -1 && stih.indexOf('&lt;\/style&gt;') != -1) {<br \/>\n    document.getElementById('dstyle').innerHTML='&lt;style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;';<br \/>\n    \/\/alert('&lt;Style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n    var divs=document.getElementsByTagName('div');<br \/>\n    for (var jdivs=0; jdivs&lt;2; jdivs++) {<br \/>\n    if (kdivs == 0) {<br \/>\n    for (idivs=0; idivs&lt;divs.length; idivs++) {<br \/>\n      if (('' + divs[idivs].className).indexOf('ui-draggable') != -1) {<br \/>\n        if (boxrect) {<br \/>\n          if (kdivs == 0) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.left) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.top) + 'px';<br \/>\n          } else if (kdivs == 1) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.left) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.bottom) + 'px';<br \/>\n          } else if (kdivs == 2) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.right) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.top) + 'px';<br \/>\n          } else if (kdivs == 3) {<br \/>\n            kdivs++;<br \/>\n            divs[idivs].style.left=('' + boxrect.right) + 'px';<br \/>\n            divs[idivs].style.top=('' + boxrect.bottom) + 'px';<br \/>\n            \/\/alert('&lt;stylE&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n            location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('&lt;style&gt;' + stih.split('&lt;\/style&gt;')[0].split('&lt;style&gt;')[1] + '&lt;\/style&gt;');<br \/>\n          }<br \/>\n        }<br \/>\n      } else if (('' + divs[idivs].className).indexOf('box') != -1 && !boxrect) {<br \/>\n        boxrect=divs[idivs].getBoundingClientRect();<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  } \/\/else {<br \/>\n    \/\/alert(stih);<br \/>\n  \/\/}<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; Javascript teamed with <font color=purple>the changed<\/font> HTML\/Javascript (behind it) &#8230;<br \/>\n<code><br \/>\n&lt;div id=\"img\" class=\"box\"<font color=purple> contenteditable=true onblur=\"fixstyle((this.innerText || this.contentWindow || this.contentDocument).replace(\/\\&lt;br\\&gt;\/g, ' ').replace(\/\\&amp\\;lt\\;\/g, '&lt;').replace(\/\\&amp\\;gt\\;\/g, '&gt;').replace(\/\\&lt\\;\/g, '&lt;').replace(\/\\&gt\\;\/g, '&gt;'));\"<\/font>&gt;<br \/>\n    Drag the points to transform the box!<font color=purple>  Optionally change styling below.&lt;br&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var xstyis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';<br \/>\n  if (xstyis != '') {<br \/>\n    while (xstyis.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      xstyis=xstyis.replace(String.fromCharCode(10), '&lt;br&gt;');<br \/>\n    }<br \/>\n    \/\/alert(xstyis.replace(\/\\&lt;\/g,'&lt;').replace(\/\\&gt;\/g,'&gt;'));<br \/>\n    document.write(xstyis.replace(\/\\&lt;s\/g,'&lt;s').replace(\/\\&lt;\\\/\/g,'&lt;\/').replace(\/e\\&gt;\/g,'e&gt;'));<br \/>\n  } else {<br \/>\n    document.write('&lt;style&gt;&lt;br&gt;.box {&lt;br&gt;margin: 20px;  padding: 10px;&lt;br&gt;height: 150px; width: 500px;&lt;br&gt;border: 1px solid black; }&lt;br&gt;&lt;\/style&gt;&lt;br&gt;');<br \/>\n  }<br \/>\n&lt;\/script&gt;<\/font><br \/>\n&lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<li>we could make the background image CSS properties &#8230;\n<ul>\n<li>background-repeat:no-repeat;<\/li>\n<li>background-size:cover;<\/li>\n<li>background-size:contain;<\/li>\n<li>elements above become <i>style=&#8217;visibility:hidden;&#8217;<\/i> (as required)<\/li>\n<\/ul>\n<p> &#8230; be user definable &#8230; <font color=blue>allow us to stay on the current incarnation of the webpage<\/font> &#8230;<br \/>\n<code><br \/>\nfunction applythis(tv) {<br \/>\n  <font color=blue>var hides, ihides=0;<\/font><br \/>\n  if (tv != \"\") {<br \/>\n   if (tv.trim() == tv) {<br \/>\n    document.getElementById(selector.replace('#','')).style.background='URL(' + tv + ')';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundRepeat='repeat';<br \/>\n   } <font color=blue>else {<br \/>\n    if (tv.indexOf(tv.trim() + '   ') != -1) {<br \/>\n    document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundSize='cover';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';<br \/>\n    } else if (tv.indexOf(tv.trim() + '  ') != -1) {<br \/>\n    document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundSize='contain';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';<br \/>\n    } else {<br \/>\n    document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';<br \/>\n    document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';<br \/>\n    }<br \/>\n   }<br \/>\n   if (tv.indexOf('#') != -1) {<br \/>\n     hides=document.getElementsByTagName('h1');<br \/>\n     for (ihides=0; ihides&lt;hides.length; ihides++) {<br \/>\n       hides[ihides].style.visibility='hidden';<br \/>\n     }<br \/>\n     hides=document.getElementsByTagName('h3');<br \/>\n     for (ihides=0; ihides&lt;hides.length; ihides++) {<br \/>\n       hides[ihides].style.visibility='hidden';<br \/>\n     }<br \/>\n     hides=document.getElementsByTagName('p');<br \/>\n     for (ihides=0; ihides&lt;hides.length; ihides++) {<br \/>\n       hides[ihides].style.visibility='hidden';<br \/>\n     }<br \/>\n   }<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>So why don&#8217;t you (re)try this HTML and Javascript (mostly jQuery) and CSS <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html-GETME\" title=\"more_transform.html\" rel=\"noopener\">more user controllable<\/a> web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html-GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to see what we mean?  It still feels weird, and wonderful!<\/p>\n<p>We have bigger plans than this.  Perhaps you can guess the direction we might go next?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-tool-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Tool Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmpt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-primer-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/transform_matrix.jpg\" title=\"CSS 3D Transformation Matrix Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Primer Tutorial<\/p><\/div>\n<p>The tutorial <a title='CSS3 3D Rotation and Transformation Primer Tutorial' href='#css33drtpt'>CSS3 3D Rotation and Transformation Primer Tutorial<\/a> discussed CSS styling regarding element transformations, and referred to the wonderful content of <a target=\"_blank\" title='' href='http:\/\/franklinta.com\/2014\/09\/08\/computing-css-matrix3d-transforms\/' rel=\"noopener\">Computing CSS matrix3d transforms | Franklin Ta<\/a>, involving matrix mathematics to transform HTML elements and the <a target=\"_blank\" title='CSS matrix3d() function information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-function\/matrix3d' rel=\"noopener\">matrix3d()<\/a> CSS function &#8230; great stuff, thanks.  Also, coming at this topic of transformations from another angle, the previous <a target=\"_blank\" title='ImageMagick and Three Ps Charcoal Implode Quality Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/imagemagick-and-three-ps-charcoal-implode-quality-tutorial\/' rel=\"noopener\">ImageMagick and Three Ps Charcoal Implode Quality Tutorial<\/a> touches on this aspect of transformations, in its case &#8220;affine&#8221; transformations, whereby an actual image element is transformed and presented in a downloadable way.<\/p>\n<p>Today we recreate that work with the CSS matrix3d() function of Frank Ta to turn this into a web application where you can drag the edges of an HTML div element to derive the underlying CSS matrix3d() function parameter set would be used to recreate this HTML div display, perhaps elsewhere.  We also allow for the user to enter in an image URL that if they click a button will apply that image as the background image to the HTML div element, as you can see play out with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/transform_matrix.jpg\" title=\"Tutorial picture\" rel=\"noopener\">tutorial picture<\/a>.  The <a target=\"_blank\" href='http:\/\/jquery.org' title='jQuery Javascript library home page' rel=\"noopener\">jQuery<\/a> Javascript here helps the day enormously, though Frank used the <a target=\"_blank\" title='CoffeeScript' href='http:\/\/coffeescript.org\/' rel=\"noopener\">CoffeeScript<\/a> (compiled into Javascript) within the <a target=\"_blank\" title='CodePen' href='https:\/\/codepen.io\/' rel=\"noopener\">CodePen<\/a> &#8220;Front End Developer Playground and Code Editor&#8221; environment <font size=1>&#8230; worth taking a skeg &#8230;<\/font> when doing a cuter looking web application at that aforesaid mentioned link.<\/p>\n<p>Is the power of the modern device going to mean these types of transformations will &#8220;power&#8221; our online world, rather than trying to make the original media &#8220;fit the bill&#8221;, always?  We&#8217;d say, probably, but we&#8217;d also say &#8230; <\/p>\n<blockquote onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php','_blank');\" style='cursor:pointer;background-color:transparent;'>\n<div style=\"vertical-align:top;color:red;width:100%;text-align:right; background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat; \"><b><i>&#8220;Nala! Put down that<br \/> matrix3d(0.7751,1.854,0,0,<br \/> 0,1.3861,0,0, 0,0,1,0,<br \/> -0.0004308,0.003552,0,1)<br \/> &#8216;deformed&#8217; soft toy, we think<br \/> you&#8217;ll find belongs to Luna &#8230; <br \/>Naaaalllllaaaa!&#8221;<\/i><\/b><\/p>\n<div style=\"margin-top:-165px;margin-right:290px;text-align:right;height:195px;color:transparent;background:URL('http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoBooth_flickr.jpg');background-position:-140px -400px;background-repeat:no-repeat;  -webkit-filter: brightness(220%);filter: brightness(220%);\"><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br \/> -0.000430821,0.00355248,0,1)<br \/> &#8220;deformed&#8221; soft toy, that<br \/> we think you&#8217;ll find belongs to Luna &#8230; Naaaalllllaaaa!<\/i>\n<\/div>\n<\/div>\n<div style=\"margin-top:30px;\"> &#8230; and don&#8217;t think that&#8217;s going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses<\/strike>ices 2017 &#8230; &#8220;The Future Is Ahead of One<font size=1>sies<\/font>&#8220;.<\/div>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p>Why don&#8217;t you try this HTML and Javascript (mostly jQuery) and CSS web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html_GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to see what we mean?  It can be weird, and wonderful!<\/p>\n<hr>\n<p id='css33drtpt'>Previous relevant <a target=\"_blank\" title='CSS3 3D Rotation and Transformation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-3d-rotation-and-transformation-primer-tutorial\/' rel=\"noopener\">CSS3 3D Rotation and Transformation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 3D Rotation and Transformation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.png\" title=\"CSS3 3D Rotation and Transformation Primer Tutorial\" id='zxcv' onmouseover=' this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".jpg\").replace(\".PNG\",\".png\"); '  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 3D Rotation and Transformation Primer Tutorial<\/p><\/div>\n<blockquote><p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.<\/p><\/blockquote>\n<p><a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html' rel=\"noopener\">Tutorial<\/a> &#8230;<\/p>\n<p>Cascading Style Sheet methodology is a good technique in order to separate document content from document presentation.  For the same content, two different CSS approaches can produce vastly different browser outputs.<\/p>\n<p>With today&#8217;s tutorial we concentrate on CSS within HTML and specifically the CSS3 3D Rotation and Transformation functionality you can read about <a target=\"_blank\" title='CSS3 3D Transforms' href='http:\/\/www.w3schools.com\/css\/css3_3dtransforms.asp' rel=\"noopener\">CSS3 3D Transforms<\/a> at w3schools.<\/p>\n<p>With the transformations section there are 16 elements in a 4&#215;4 matrix to define, and so there is a fair degree of mathematical geometry that would be good to know here.  This mathematics is explained well at <a target=\"_blank\" title='' href='http:\/\/franklinta.com\/2014\/09\/08\/computing-css-matrix3d-transforms\/' rel=\"noopener\">Computing CSS matrix3d transforms | Franklin Ta<\/a> &#8230; thanks a lot.<\/p>\n<p>You can download source code and rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html_GETME' title=\"rotate3d.html\" rel=\"noopener\">rotate3d.html<\/a> or you can use the <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html' title=\"rotate3d.html\" rel=\"noopener\">live run<\/a> to wake up all those ants on the footpath that have been thinking their life is just grand and dandy.<\/p>\n<p>Thanks to <a target=\"_blank\" title='CSS information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets' rel=\"noopener\">Wikipedia<\/a> for the quote above.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d10553' onclick='var dv=document.getElementById(\"d10553\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10553' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d32616' onclick='var dv=document.getElementById(\"d32616\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/matrix\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32616' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51966' onclick='var dv=document.getElementById(\"d51966\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51966' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51989' onclick='var dv=document.getElementById(\"d51989\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/browse\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51989' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51992' onclick='var dv=document.getElementById(\"d51992\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51992' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51995' onclick='var dv=document.getElementById(\"d51995\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/touch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51995' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51999' onclick='var dv=document.getElementById(\"d51999\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51999' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d52006' onclick='var dv=document.getElementById(\"d52006\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/windows\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52006' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s CSS 3D Transformation Matrix Share Tutorial said &#8230; Up to yesterday&#8217;s CSS 3D Transformation Matrix Mobile Mousemove Tutorial sharing and\/or collaboration was up to the user taking their own screenshots and perhaps communicating that information themselves. And so, today, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-windows-snip-and-sketch-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,29,37],"tags":[69,1993,174,211,222,1604,2442,2539,281,342,380,385,3606,2730,576,652,663,756,795,3605,997,1776,3169,1133,1159,3607,2005,1294,3604,1298,1319,1891,3597,3575,2485,1435,1686],"class_list":["post-52006","post","type-post","status-publish","format-standard","hentry","category-elearning","category-operating-system","category-tutorials","tag-ajax","tag-browse","tag-button","tag-click","tag-collaborate","tag-collaboration","tag-contenteditable","tag-createelement","tag-css","tag-div","tag-email","tag-emoji","tag-emoji-button","tag-formdata","tag-html","tag-javascript","tag-jquery","tag-matrix","tag-mobile","tag-mousemove","tag-programming","tag-screenshot","tag-sessionstorage","tag-share","tag-sms","tag-snip-and-sketch","tag-tool","tag-touch","tag-touchmove","tag-transform","tag-tutorial","tag-user","tag-user-definable","tag-user-input","tag-visibility","tag-windows","tag-windows-10"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52006"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=52006"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52006\/revisions"}],"predecessor-version":[{"id":64608,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52006\/revisions\/64608"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}