关于Css3 3d翻转的问题

http://aswsol.wan.360.cn/
图片说明
这个3D翻转效果怎么做的，css3 translate3d(0,140px,0) 配合rotateX 和他一点都不一样。。萌新初来驾到===求解答鸭~~

我特意去写了个demo，你看下，
重点属性 有注释。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3D盒子旋转Demo</title>
    <style>
        .rotate-box {
            height: 137px;
            width: 286px;
            overflow: hidden; /* 隐藏翻转上去和翻转下去的图片 */
        }
        .rotate-inner {
            transition: all .4s ease;
            perspective: 428px; /* 重点属性，定义 3D 元素距视图的距离，有他才有3D效果 */
            -webkit-perspective: 428px;
        }
        .rotate-inner .top-block,
        .rotate-inner .bottom-block {
            backface-visibility: hidden; /* 辅助属性-属性定义当元素不面向屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用 */
            transition: all .4s ease;
            -webkit-backface-visibility: hidden;
            -webkit-transition: all .4s ease;
            width: 286px;
            height: 137px;
        }
        .rotate-inner .top-block {
            transform-origin: bottom; /* 旋转轴线位置 */
            -webkit-transform-origin: bottom;
            transform: rotateX(0deg); /* 默认旋转角度 */
            -webkit-transform: rotateX(0deg);
        }
        .rotate-inner .bottom-block {
            transform-origin: top; /* 旋转轴线位置 */
            -webkit-transform-origin: top;
            transform: rotateX(-90deg);
            -webkit-transform: rotateX(-90deg);
            background: url(http://p0.qhimg.com/d/inn/72e0645c64f3/theme/images/yxzlhover.png) no-repeat;
        }
        .rotate-box:hover .rotate-inner {
            margin-top: -137px; /* 旋转后上移，把下面的block显示，上面的隐藏 */
        }
        .rotate-box:hover .rotate-inner .top-block {
            transform: rotateX(90deg); /* 旋转后角度 */
            -webkit-transform: rotateX(90deg);
        }
        .rotate-box:hover .rotate-inner .bottom-block {
            transform: rotateX(0);
            -webkit-transform: rotateX(0);
        }
    </style>
</head>
<body>
    <div class="rotate-box">
        <div class="rotate-inner">
            <img class="top-block" src="http://p5.yx-s.com/d/inn/72e0645c64f3/theme/images/yxzl2.png">
            <div class="bottom-block"></div>
        </div>
    </div>
</body>
</html>