専門家。
私は自分のギャラリー用に回転する立方体の効果に取り組んでおり、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);