-1

左側が黒で右側が赤のイメージがあります。私の質問: 真ん中の本のようにこの画像をひっくり返すことは可能ですか?私は左側を回転させ、右側を古い位置にとどめたいと思います。ありがとう

4

3 に答える 3

2

まず、あなたの質問を明確にすることは可能ですか？「この画像を真ん中の本のようにひっくり返して」と言うと、何を求めているのかわかりません。右側が黒で左側が赤ということですか？また、これは Web ページでクリックまたはホバーしたときに発生する必要がありますか?

どのような種類の変換でも、CSS3 transform プロパティを使用する必要があります。例えば：

div
{
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    transform:rotate(7deg);
}

ブラウザのプレフィックスを設定することを忘れないでください。

于 2013-06-04T12:36:11.687 に答える
1

視点プロパティと Y 軸を中心とした回転を使用して、かなり適切な効果を得ることができます。

たとえば、次のようなマークアップを使用します。

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

次のように CSS を使用します。

.left, .right {
  width:100px;
  height:200px;
  float:left;
}
.left {
  background:red;
  transform-origin:100px 0;
  transition:transform 1s;
}
.right {
  background:black;
}
.wrapper {
  perspective:1000px;
  perspective-origin:100px 100px;
}

.wrapper:hover .left {
  transform:rotateY(180deg);
}

この特定の例では、「本」にカーソルを合わせると変換が適用されます。

Webkit プレフィックスを含むフィドルの例を次に示します: http://jsfiddle.net/nAEBF/

于 2013-06-04T12:48:13.277 に答える
1

機能的な純粋な css フリップブックは存在しないか、見つけられなかったと思います。this oneやthis one
のようないくつかの実験を見つけることができますが、それらは素晴らしいものですが、完全な作業の一部に過ぎません。

とにかく、いくつかの JS ライブラリでそれを行うことができます。TurnJSについて考えています。

于 2013-06-04T12:35:30.020 に答える