/* Copyright Tonton du Web */

/* Effet Flip Bas Haut */

.flipBottom{
    width:200px;
    height:200px;  
    -webkit-perspective:500px;   
    perspective:500px;   
}
.flipB{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flipBottom:hover .flipB{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.flipB div{
    position:absolute;
    width:inherit;
    height:inherit;        
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden;       
}

.flipB div:last-child{
    xbackground:#333;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.flipB div:last-child p{
    color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
    padding-top:50px;
    text-align:center;  
}

.flipB img {
    width: inherit;
    height: inherit;
}

/************************/
/* Effet Flip Haut Bas */

.flipTop{
    width:200px;
    height:200px;
    -webkit-perspective:500px;   
    perspective:500px;   
}
.flipT{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flipTop:hover .flipT{
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
.flipT div{
    position:absolute;
    width:inherit;
    height:inherit;  
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden;       
}

.flipT div:last-child{
    xbackground:#333;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
.flipT div:last-child p{
    color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
    padding-top:50px;
    text-align:center;  
}

.flipT img {
    width: inherit;
    height: inherit;
}

/************************/

/* Effet Flip Gauche Droite */

.flipLeft{
    width:200px;
    height:200px;
    -webkit-perspective:500px;   
    perspective:500px;   
}
.flipL{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flipLeft:hover .flipL{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipL div{
    position:absolute;
    width:inherit;
    height:inherit;  
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden;       
}

.flipL div:last-child{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipL div:last-child p{
    color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
    padding-top:50px;
    text-align:center;  
}

.flipL img {
    width: inherit;
    height: inherit;
}

/************************/

/* Effet Flip Droite Gauche */

.flipRight{
	width:200px;
    height:200px;
    -webkit-perspective:500px;   
    perspective:500px;   
}
.flipR{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flipRight:hover .flipR{
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flipR div{
    position:absolute;
    width:inherit;
    height:inherit;  
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden; 	   
}

.flipR div:last-child{
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flipR div:last-child p{
	color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
	padding-top:50px;
    text-align:center;  
}

.flipR img {
    width: inherit;
    height: inherit;
}

/************************/

/* Effet Flip 360 Gauche Droite */

.flip360Left{
    width:200px;
    height:200px;
    -webkit-perspective:1000px;   
    perspective:1000px;   
}
.flip360L{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flip360Left:hover .flip360L{
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.flip360L div{
    position:absolute;
    width:inherit;
    height:inherit;  
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden;       
}

.flip360L div:last-child{
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.flip360L div:last-child p{
    color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
    padding-top:50px;
    text-align:center;  
}

.flip360L img {
    width: inherit;
    height: inherit;
}

/************************/

/* Effet Flip 360 Droite Gauche */

.flip360Right{
    width:100px;
    height:100px;
    -webkit-perspective:500px;   
    perspective:500px;   
}
.flip360R{
    width:inherit;
    height:inherit;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.flip360Right:hover .flip360R{
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
}
.flip360R div{
    position:absolute;
    width:inherit;
    height:inherit;  
    -webkit-backface-visibility: hidden;       
    backface-visibility: hidden;       
}

.flip360R div:last-child{
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
}
.flip360R div:last-child p{
    color:white;
    text-shadow:0 0 1px #111;
    font-style:italic;
    padding-top:50px;
    text-align:center;  
}

.flip360R img {
    width: inherit;
    height: inherit;
}

/************************/