jquery - css 过渡像 3d 框

Question

我正在寻找像本网站那样的实现效果:link to website (这不是推广网站)

有facebook icon使用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)"})

    });