5

私が取り組んでいるプロジェクトのために、3D に見えるカードめくりタイプのアニメーションを作成しようとしています。残念ながら、私のアニメーションは完全に 3D に見えません。

私はこのガイドを使用しています。最初の例では、ウィンドウの背景が反転しているように見せることができました。しかし、JSFiddleで同じコードを使用しようとすると、結果は彼のものと同じではありませんでした。

彼のデモコードは以下の効果をもたらしました。カードが裏返されると、片面が小さくなり、遠近法の印象を与えます。 ここに画像の説明を入力

彼のコードを使用した私の JSFiddle では (背景が異なる場合を除いて)、側面はずっと同じサイズのままのように見えます。 ここに画像の説明を入力

誰かが私が見逃したこと、または彼のウェブサイトで彼が持っていたのと同じ遠近効果を得る方法を説明してもらえますか? 前もって感謝します。

彼の HTML コード:

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="/images/Windows%20Logo.jpg"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

彼の CSS コード:

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}
4

2 に答える 2

3

きれいに保つために、CSS からベンダー プレフィックスを削除したと彼が言っている箇所を参照してください。それはあなたの問題だと思います。これらの CSS プロパティの一部は完全に標準ではありませんが、さまざまなベンダー プレフィックスを持つさまざまなブラウザーに実装されています。実際にはどれかわかりませんが、Google がお手伝いします。

編集：うーん。いずれにしても CSS が原因ですが、ベンダー プレフィックスはあまり見当たりません。私は彼の実際の CSS をページから取り出し、あなたが使用した「きれいな」CSS の代わりに貼り付けました。これにより、フィドルが機能します。彼の実際の CSS は次のとおりです。

#f1_container {
    height: 281px;
    margin: 10px auto;
    position: relative;
    width: 450px;
    z-index: 1;
}
#f1_container {
    perspective: 1000px;
}
#f1_card {
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s linear 0s;
    width: 100%;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
    box-shadow: -5px 5px 5px #AAAAAA;
    transform: rotateY(180deg);
}
.face {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}
.face.back {
    -moz-box-sizing: border-box;
    background-color: #AAAAAA;
    color: #FFFFFF;
    display: block;
    padding: 10px;
    text-align: center;
    transform: rotateY(180deg);
}
于 2013-11-14T21:51:04.773 に答える
2

彼らはいくつかの CSS に誤りがありました...例では、彼は class を持っていましたが.back.face、これはそうあるべきでした.face.back(指摘されたように、なぜそれが機能しなかったのかではありません。単にクリーンアップしただけです)。他のポスターが指摘したように、他の問題が原因でした。新しい jsFiddle を作成しました。ただし、IE ではこのような効果をレンダリングするのに苦労するため、jQuery フリップ プラグインを使用します。

http://jsfiddle.net/JJrHD/1/

于 2013-11-14T21:58:01.610 に答える