jquery - 像 3d 盒子一样的 css 过渡

Question

我正在寻找像这个网站一样的效果:link to website (这不是宣传网站)

有facebook图标使用transition，但我不能，我无法自己逆向工程效果。

====>

这是我的尝试:

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);
}

感谢您的帮助。

Answer 1

<强> Here 是根据您的要求的工作链接。

THis is the tutorial link和演示 here

这对你有帮助。

这个函数正在做一些技巧，剩下的就是你的CSS了。

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

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

    });