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 に答える