Created
September 12, 2014 16:30
-
-
Save tadeuzagallo/4cbcd8994c91e66b8de1 to your computer and use it in GitHub Desktop.
HTML - Manual transform children
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Project name</title> | |
| <style> | |
| .container { | |
| display: block; | |
| border: 1px solid black; | |
| position: relative; | |
| height: 200px; | |
| width: 600px; | |
| padding: 100px 0 0 180px; | |
| transform: rotate3d(1, 1, 0, 45deg); | |
| } | |
| .preserve { | |
| transform-style: preserve-3d; | |
| } | |
| .one, | |
| .two, | |
| .three, | |
| .four { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .one { | |
| background: blue; | |
| transform-origin: center left; | |
| transform: rotateY(-90deg); | |
| } | |
| .two { | |
| background: red; | |
| transform-origin: top center; | |
| transform: rotateX(90deg); | |
| } | |
| .three { | |
| background: green; | |
| transform-origin: center right; | |
| transform: rotateY(90deg); | |
| } | |
| .four { | |
| background: black; | |
| transform-origin: bottom center; | |
| transform: rotateX(-90deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container preserve"> | |
| <div class="one"></div> | |
| <div class="two"></div> | |
| <div class="four"></div> | |
| <div class="three"></div> | |
| </div> | |
| <div class="container manual"> | |
| <div class="one"></div> | |
| <div class="two"></div> | |
| <div class="four"></div> | |
| <div class="three"></div> | |
| </div-3d> | |
| <script> | |
| parseChildren(document.querySelector('.manual')); | |
| function parseChildren(root, children) { | |
| var c = root.children; | |
| var l = c.length; | |
| if (!l) { | |
| return; | |
| } | |
| for (var i = 0; i < l; i++) { | |
| var x = c[i]; | |
| multiply(root, x); | |
| parseChildren(x); | |
| } | |
| root.style.transform = 'none'; | |
| } | |
| function multiply(a, b) { | |
| var ra = getCssTransform(a); | |
| var rb = getCssTransform(b); | |
| if (ra === 'none') { | |
| return; | |
| } else if (rb === 'none') { | |
| b.style.transform = ra; | |
| return; | |
| } | |
| var ma = getTransformMatrix(ra); | |
| var mb = getTransformMatrix(rb); | |
| var r = []; | |
| var l = 4; | |
| for (var i = 0; i < l; i++) { | |
| for (var j = 0; j < l; j++) { | |
| var sum = 0; | |
| for (var k = 0; k < l; k++) { | |
| sum += ma[i*l+k] * mb[k*l+j]; | |
| } | |
| r.push(sum); | |
| } | |
| } | |
| b.style.transform = 'matrix3d(' + r.join(', ') + ')'; | |
| } | |
| function getCssTransform(a) { | |
| return window.getComputedStyle(a)['transform']; | |
| } | |
| function getTransformMatrix(raw) { | |
| var match; | |
| if ((match = raw.match(/matrix3d\(([^)]+)\)/))) { | |
| return match[1].split(', ').map(function (a) { | |
| if (/e-/.test(a)) { | |
| return 0; | |
| } | |
| return parseFloat(a); | |
| }); | |
| } | |
| }</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment