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

Question

我正在寻找在这个网站上实现的效果：链接到网站（这不是推广网站）

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

====>

这是我的尝试：

杰宾：

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

这是根据您的要求的工作链接。

这是教程链接和演示

是什么会帮助你。

这个函数正在做技巧休息是你的CSS。

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

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

    });