experts.I'm working on a spinning cube effect for my gallery and I've checked out Paul Hayes experimental cube at his homepage (to watch it, please use Google Chrome; otherwise it might not work correctly).The challenge at this moment is to get it running on a mobile device, fitting the page width automatically. Otherwise, it's much too small. The cube front face must match the browser with, so that you only see the perspective in the transformation process.What did I do?
I tried putting width/height of outer div to 100%
I tried changing the offset of all 6 sides to percent. It workspartially, but tranformZ does not work with percent-numbers
...and a LOT of other things; been struggling for hours and hours. I was SO close, but couldn't work out, how to set the transformation point properly of .viewport or .cube, using -webkit-perspective-origin
I then tried to build it all from scratch. I got my cube, scaled it 100% and were able to flip it 180 degrees around its own y-axis and tried to place an image further back (-100% on the z-axis, but translateZ doesn't work in % as I mentioned before) so when I scale the browser, it all moves around.So, the big question is: Is it possible to make the entire cubes front face fit the entire width of the browser, so that it will just scale the content, no matter what it is? And if yes, how?Here's the most important part of the code, I'm using:\[code\]img { min-width:100%; <-- tried width:100% as well. All images on the scene must be 100% in width and height min-height:100%;}.viewport {-webkit-perspective: 800;-webkit-perspective-origin: 50% 100px;min-height: 100%;min-width: 100%;position:relative;}.cube {position: relative;margin: auto auto;height: 300px; <- If I change this to percent, it looks very strangewidth: 300px;-webkit-transition: -webkit-transform 50ms linear;-webkit-transform-style: preserve-3d;}.cube h2 {color: #fff;padding-top: 0;margin-top: 0;}.cube a {color: #fff;}.cube > div {position: absolute;height: 100%;width: 100%;}.cube > div:first-child {-webkit-transform: rotateX(90deg) translateZ(150px);\[/code\]
