Question

专家。

我正在为我的画廊制作旋转立方体效果，我在his homepage检查了Paul Hayes实验立方体（要观看它，请使用谷歌浏览器;否则它可能无法正常工作）。< / p>

此时的挑战是让它在移动设备上运行，自动调整页面宽度。否则，它太小了。立方体正面必须与浏览器匹配，这样您才能在转换过程中看到透视图。

我做了什么？

我尝试将外部div的宽度/高度设为100％
我尝试将所有6个边的偏移量改为百分比。有用部分，但tranformZ不适用于百分比数字
......还有很多其他的东西;一直在挣扎几个小时。我是如此接近，但无法解决，如何正确设置.viewport或.cube的转换点，使用-webkit-perspective-origin

然后我尝试从头开始构建它。我得到了我的立方体，将其缩放100％并且能够围绕其自己的y轴将其翻转180度，并尝试将图像进一步向后放置（在z轴上为-100％，但是translateZ在％中不起作用我之前提到过）所以当我缩放浏览器时，它都会移动。

所以，最大的问题是：是否有可能使整个立方体正面适合浏览器的整个宽度，这样它就可以扩展内容，无论它是什么？如果是的话，怎么样？

这是代码中最重要的部分，我正在使用：

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 strange
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);

Answer 1

在你的页面

的头部试试这个

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

固定大小的div匹配宽度

1 个答案: