
/* 翻轉效果 */
@keyframes fx-flip-x-back {
    0% {    
        visibility: visible;  
        opacity: 1;
        transform:rotateX(0deg);
    }  
    50% {
        visibility: hidden; 
        opacity: 1;
        transform:rotateX(90deg);
    }  
    100% {
        opacity: 0;
        transform:rotateX(180deg);
    }
}
@keyframes fx-flip-x-front {
    0% {      
        visibility: hidden; 
        opacity: 0;
        transform:rotateX(-180deg);
    }  
    50% {
        visibility: visible; 
        opacity: 0;
        transform:rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform:rotateX(0deg);
    }
}

/* 翻轉效果 */
@keyframes fx-flip-y-back {
    0% {    
        visibility: visible;  
        opacity: 1;
        transform:rotateY(0deg);
    }  
    50% {
        visibility: hidden; 
        opacity: 1;
        transform:rotateY(90deg);
    }  
    100% {
        opacity: 0;
        transform:rotateY(180deg);
    }
}
@keyframes fx-flip-y-front {
    0% {      
        visibility: hidden; 
        opacity: 0;
        transform:rotateY(-180deg);
    }  
    50% {
        visibility: visible; 
        opacity: 0;
        transform:rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform:rotateY(0deg);
    }
}

@keyframes fx-fadein {
    0% {
        opacity: 0;
    }  
    100% {
        opacity: 1;
    }
}
@keyframes fx-fadeout {
    0% {      
        visibility: visible; 
        opacity: 1;
    }  
    100% {
        opacity: 0;
        visibility: hidden; 
    }
}

.fcfx-flip-back{
    visibility: hidden; 
}
.fcfx-flip-front{
    visibility: visible;
}

.fx-flip-back{
    visibility: hidden; 
    animation: fx-flip-y-back 1s linear;
    -webkit-animation: fx-flip-y-back 1s linear;
}
.fx-flip-front{
    visibility: visible;
    animation: fx-flip-y-front 1s linear;
    -webkit-animation: fx-flip-y-front 1s linear;
}

.fx-fadeout-set{
    opacity: 0;
    animation: fx-fadeout linear;
    -webkit-animation: fx-fadeout linear;
}

.fx-fadein{
    opacity: 1;
    animation: fx-fadein linear;
    -webkit-animation: fx-fadein linear;
}



