css - 固定大小的 div 匹配宽度

Question

专家。

我正在为我的画廊制作旋转立方体效果，我已经在 his homepage 查看了 Paul Hayes 实验立方体。 (要观看它，请使用谷歌浏览器；否则它可能无法正常工作)。

目前的挑战是让它在移动设备上运行，自动适应页面宽度。否则，它太小了。立方体正面必须与浏览器相匹配，以便在转换过程中只看到透视。

我做了什么？

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

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

所以，最大的问题是:是否有可能让整个立方体正面适合浏览器的整个宽度，这样它只会缩放内容，不管它是什么？如果是，怎么做？

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

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" />