1

一連のキューブを含むページがあります。これらの立方体は、CSS を使用して 3D に変換されます。

Windows 7 の Chrome では問題なく表示されますが、Windows XP の Chrome では白い背景しか表示されません。どちらも最新バージョンの Chrome を実行しています。

jsfiddle で全ページを表示

<div class="cube" style="-webkit-transform: translateZ(-32.5px);">
    <div class="front" style="-webkit-transform: translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="right" style="-webkit-transform: rotateY(90deg) translateZ(32.5px);">               
        <img src="/search.png" width="65" height="65">
    </div>
    <div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="top" style="-webkit-transform: rotateX(90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
</div>
4

4 に答える 4

8

GPU アクセラレーションが有効になっている場合、Chrome は 3D css のみを適切にレンダリングします。Windows の safari で同じコードをテストすると、動作するはずです。

Chrome で GPU アクセラレーションが有効になっているかどうかを確認するには、アドレス バーに about:GPU と入力し、その内容を確認します。

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

于 2013-03-15T18:17:54.720 に答える
0

FollwingはChromeとFirefoxのCSSコードで動作します

.flip-container {
  perspective: 1000;
  -webkit-perspective: 1000;
}
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  float: left;
  height: 179px;
  margin-bottom: 49px;
  margin-left: 31px;
  width: 258px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden;
  position: absolute;
  top: 0;
  left: -42px;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

HTMLコード

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="product-box front">
       #front content
    </div>
    <div class="product-box back">
      #back content
    </div>
  </div>
</div>
于 2013-03-21T11:08:33.017 に答える
0

modernizrを試しましたか？

このページに移動します http://modernizr.com/download/#-flexboxlegacy-csstransforms3d-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load

以下のダウンロードをクリックしてください。

ページでJavaScriptを使用します。

私が思うように機能する場合、ChromeのWin7マシンでは、htmlタグに次のクラスが必要です。Chromecsstransforms3dのWinXPマシンでは、htmlタグに次のクラスが必要です。no-csstransforms3d

modernizr / chromeが、3Dアクセラレーションが利用可能であり、適切なcssクラスに反映されているかどうかを確認するのに、それほどインテリジェントであるかどうかはわかりません。

編集

これがフィドル ですhttp://jsfiddle.net/uSbYL/1/

于 2013-03-20T16:57:35.617 に答える