/**
 * 3D抽屉效果
 */

.minirefresh-theme-drawer3d .minirefresh-downwrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    background: #000000;
    /*
     * 开启3D视角，经测试，就算不写，只要有translateZ,在iOS下默认也有这个效果
     * http://www.w3cplus.com/css3/transform-basic-property.html
     * */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /**
     * 隐藏不可见元素
     */
    backface-visibility: hidden
}

.minirefresh-theme-drawer3d .minirefresh-downwrap .downwrap-content {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}


/**
 * 由于父容器开启了preserve-3d 3D视角（iOS中只有有translateZ就相当于会默认开启），所以如果直接是drawer3d进行变换，会有一部分无法显示
 * 需要中间来一个舞台，舞台占满宽高
 */

.minirefresh-theme-drawer3d .state-3d {
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    perspective: 100px;
    -webkit-perspective: 100px;
    /*
     * 视角和子元素的origin保持一致
     */
    perspective-origin: center bottom;
    -webkit-perspective-origin: center bottom;
}

.minirefresh-theme-drawer3d .drawer3d {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #FFFFFF;
    text-align: center;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

.minirefresh-theme-drawer3d .drawer3d .drawer3d-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #D3D3D3;
    /*
    * 最终的透明度是计算生成的
    */
    opacity: .4;
}