0
私は2つの異なる角度で無限に回転する3Dアニメーションキューブを作成しました。キューブは当社の新製品test websiteのホームページにあります（下にスクロールすると、ソフトウェアのタイトルの隣にあります）。 Firefoxでは正常に動作しますが、Google ChromeやOperaではキューブは表示されません。そこで、要素を調べて、スタイルメニューの属性の1つにチェックを入れると、キューブはフェイス間にギャップを持って表示されます。 Microsoft Edgeでは、キューブは表示されますが、回転しません。私はWindowsを使っているのでSafariをチェックしていない。アニメーション3DキューブはFirefoxでのみ動作します
また、キューブフェイスの画像はFirefoxでは正しく表示されますが、他のブラウザでは画像が拡大表示され、画像の一部の地震レイヤーしか表示されません。
私はGoogle Chromeを使用して、JSFiddleで問題を再現しようとしました。クラスのcolを100vhに設定すると私のホームページに大きな空きスペースが残るため、私のためにはできません。
この3D回転キューブをすべてのブラウザで作成するにはどうすればよいですか？どんな助けでも大変感謝しています。事前に感謝します！
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
perspective: 25em;
}
.row {
display: flex;
}
.row::after {
display: block;
content: '';
clear: both;
}
.col {
position: relative;
flex: 1;
}
[class*='cube'] {
position: absolute;
}
.cube {
top: 50%;
left: 50%;
font-size: 8vmin;
transform-style: preserve-3d;
animation: cube 8s linear infinite;
}
.cube-face {
margin: -2em;
width: 4em;
height: 4em;
backface-visibility: hidden;
}
.cube-face:nth-child(1) {
transform: translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(2) {
transform: rotateY(90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(3) {
transform: rotateY(180deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(4) {
transform: rotateY(270deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(5) {
transform: rotateX(90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(6) {
transform: rotateX(-90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat fixed;
}
@keyframes cube {
\t to {
\t transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn);
}
}<div class="row">
<div class="col">
<div class="cube">
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
</div>
</div>
</div>
実は、私は、両方で勝利10ああ上のChromeとオペラのキューブを参照してください、そしてもう一つすることができます（確実に）何もないが動作する場合、あなたはまた、WebGLのに頼ることができ代わりに。 – domsson