0

专家。

我正在为我的画廊制作旋转立方体效果，并且我已经在他的主页上查看了 Paul Hayes 实验立方体（要观看它，请使用 Google Chrome；否则它可能无法正常工作）。

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

我做了什么？

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

然后我尝试从头开始构建它。我得到了我的立方体，将其缩放 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);
4

1 回答 1

1

在你的页面头部试试这个

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-01-20T03:26:18.683 回答