experts.
I'm currently experimenting with a spinning cube effect for my gallery and I recently came across Paul Hayes' experimental cube on his website (it's best viewed in Google Chrome). However, I am facing a challenge in getting it to work smoothly on mobile devices where it automatically adjusts to fit the page width. The front face of the cube needs to precisely match the browser width to maintain the perspective during the transformation process.
The main issue I've encountered is how to achieve this responsive design for the cube on different devices. I've tried various methods such as setting the outer div's width/height to 100%, adjusting offsets to percentages, and exploring transformation points with -webkit-perspective-origin, but haven't found a perfect solution yet.
After numerous attempts and hours of troubleshooting, I attempted to build the cube from scratch, scaling it to 100% and incorporating rotations around its y-axis. However, challenges arose with applying transformations using percentage values, particularly when trying to position images further back on the z-axis.
So, the question remains: Is it feasible to make the entire front face of the cube adapt to the full width of the browser, effectively scaling the content regardless of its size? And if so, how can this be accomplished?
Here is the key portion of the code I have been working with:
img {
min-width:100%;
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;
width: 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);
}