像3d框一样的css过渡

Question

我正在寻找像本网站一样的效果：link to website（这不是推广网站）

有使用转换的facebook图标，但我无法通过自己的方式逆转工程效果。

====＆gt;

这是我的尝试：

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

    });