2

私はこのウェブサイトのような効果を達成するために探しています: ウェブサイトへのリンク(これはウェブサイトの宣伝ではありません)

トランジションを使ったFacebookのアイコンがありますが、自分で効果をリバースエンジニアリングすることができません。

の上====>ここに画像の説明を入力

これは私の試みです：

JsBin:

http://jsbin.com/ofIJEVO/5/edit

HTML:

<div class="box">
    <div class='off'>off</div>
    <div class='on'>on</div>
</div>

CSS:

.box {
  height: 100px;
  width: 100px;
}

.off {
  height: 100%;
  width: 100%;
  background-color: gray;
  transition: all 0.5s ease;
}

.on {
  height: 100%;
  width: 100%;
  background-color: orangered;
  transition: all 0.5s ease;
      -webkit-transform: rotateY(-90deg);
     -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}

.box:hover .off{
    -webkit-transform: rotateY(90deg);
     -moz-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

.box:hover .on{
    -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

ご協力ありがとうございました。

4

1 に答える 1

3

これは、要件に応じた作業リンクです。

これはチュートリアルのリンクであり、デモはここにあります

あなたを助けるものです。

この関数はトリックを行っています残りはあなたのcssです。

  $("#facebook").mouseover(function(){
        $(this).css({"transform":"rotateY(100deg)"})

    });
    $("#facebook").mouseleave(function(){
        $(this).css({"transform":"rotateY(0deg)"})

    });
于 2013-10-03T07:55:38.493 に答える