.book3d-container {
    float: left;
    width: 300px;
    height: 260px;
    position: relative;
    margin: 0;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}

#boxShadow {
    z-index: -1;
    position: absolute;
    left: -84px;
    bottom: -23px;
}
#boxShadow img{
    height: 150px;
}

#box {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

    #box figure {
        display: block;
        position: absolute;
        /*border: 1px solid #dddddd;*/
        line-height: 196px;
        font-size: 90px;
        text-align: center;
        font-weight: bold;
        color: white;

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    #box.panels-backface-invisible figure {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    #box .front {
        height: 196px;
    }
    #box .back {
    }

    #box .right {
        
    }
    #box .left {
        width: 19px;   /* ความหนาของสันปก */
        height: 271px; /* ความสูงของสันปก */
        left: 177px;
        top: -5px;
    }

    #box .top,
    #box .bottom {
        width: 296px;
        height: 96px;
        top: 50px;
        line-height: 96px;
    }


    #box .front {
        background-color: #ffffff;
    }
    #box .front img{
        height: 260px; /* ต้อง Fix ความสูงของหน้าปกไว้ */
    }

    #box .back {
        background-color: #ffffff;
    }

    #box .right {
        background-color: #ffffff;
    }

    #box .left {
        /* background-color: #404040; */
        background-image: url('/Images/bg-book-edge.png');
        background-repeat: repeat-y;
    }

    #box .top {
        background-color: #ffffff;
    }

    #box .bottom {
        background-color: #ffffff;
    }

    #box .front {
        -webkit-transform: translateZ( 50px );
        -moz-transform: translateZ( 50px );
        -o-transform: translateZ( 50px );
        transform: translateZ( 50px );
    }

    #box .back {
        -webkit-transform: rotateX( -180deg ) translateZ( 50px );
        -moz-transform: rotateX( -180deg ) translateZ( 50px );
        -o-transform: rotateX( -180deg ) translateZ( 50px );
        transform: rotateX( -180deg ) translateZ( 50px );
    }

    #box .right {
        -webkit-transform: rotateY( 90deg ) translateZ( 150px );
        -moz-transform: rotateY( 90deg ) translateZ( 150px );
        -o-transform: rotateY( 90deg ) translateZ( 150px );
        transform: rotateY( 90deg ) translateZ( 150px );
    }

    #box .left {
        -webkit-transform: rotateY( -90deg ) translateZ( 150px );
        -moz-transform: rotateY( -90deg ) translateZ( 150px );
        -o-transform: rotateY( -90deg ) translateZ( 150px );
        transform: rotateY( -90deg ) translateZ( 150px );
    }

    #box .top {
        -webkit-transform: rotateX( 90deg ) translateZ( 100px );
        -moz-transform: rotateX( 90deg ) translateZ( 100px );
        -o-transform: rotateX( 90deg ) translateZ( 100px );
        transform: rotateX( 90deg ) translateZ( 100px );
    }

    #box .bottom {
        -webkit-transform: rotateX( -90deg ) translateZ( 100px );
        -moz-transform: rotateX( -90deg ) translateZ( 100px );
        -o-transform: rotateX( -90deg ) translateZ( 100px );
        transform: rotateX( -90deg ) translateZ( 100px );
    }


    #box.show-front {
        -webkit-transform: translateZ( -50px );
        -moz-transform: translateZ( -50px );
        -o-transform: translateZ( -50px );
        transform: translateZ( -50px );
    }

    #box.show-back {
        -webkit-transform: translateZ( -50px ) rotateX( -180deg );
        -moz-transform: translateZ( -50px ) rotateX( -180deg );
        -o-transform: translateZ( -50px ) rotateX( -180deg );
        transform: translateZ( -50px ) rotateX( -180deg );
    }

    #box.show-right {
        -webkit-transform: translateZ( -150px ) rotateY( -90deg );
        -moz-transform: translateZ( -150px ) rotateY( -90deg );
        -o-transform: translateZ( -150px ) rotateY( -90deg );
        transform: translateZ( -150px ) rotateY( -90deg );
    }

    #box.show-left {
        -webkit-transform: translateZ( -150px ) rotateY( 45deg );
        -moz-transform: translateZ( -150px ) rotateY( 45deg );
        -o-transform: translateZ( -150px ) rotateY( 45deg );
        transform: translateZ( -150px ) rotateY( 45deg );
    }

    #box.show-top {
        -webkit-transform: translateZ( -100px ) rotateX( -90deg );
        -moz-transform: translateZ( -100px ) rotateX( -90deg );
        -o-transform: translateZ( -100px ) rotateX( -90deg );
        transform: translateZ( -100px ) rotateX( -90deg );
    }

    #box.show-bottom {
        -webkit-transform: translateZ( -100px ) rotateX( 90deg );
        -moz-transform: translateZ( -100px ) rotateX( 90deg );
        -o-transform: translateZ( -100px ) rotateX( 90deg );
        transform: translateZ( -100px ) rotateX( 90deg );
    }