body { font-size: normal; }
.flip3D { width:100px; height:100px; margin:5px; float:left; }
.flip3D > .front {
    position: absolute;
    transform: perspective( 800px ) rotateX( 0deg );
    background: #E6E6E6;
    height: 100px;
    width: 100px;
    border-radius: 7px;
    background-size: 100px;
    backface-visibility: hidden;
    transition: transform 0.5s linear 0s;
}
.flip3D > .back {
    position: absolute;
    transform: perspective( 800px ) rotateX( 180deg );
    background: #E6E6E6;
    height: 80px;
    width: 80px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform 0.5s linear 0s;
    background-size: 100px;
    padding: 10px;
}

.flip3D-wide { width:210px; height:100px; margin:5px; float:left; }
.flip3D-wide > .front-wide {
    position: absolute;
    transform: perspective( 800px ) rotateX( 0deg );
    background: #E6E6E6;
    height: 100px;
    width: 210px;
    border-radius: 7px;
    background-size: 100px;
    backface-visibility: hidden;
    transition: transform 0.5s linear 0s;
}
.flip3D-wide > .back-wide {
    position: absolute;
    transform: perspective( 800px ) rotateX( 180deg );
    background: #E6E6E6;
    height: 80px;
    width: 190px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform 0.5s linear 0s;
    background-size: 100px;
    padding: 10px;
}

.flip3D:hover > .front { transform: perspective( 800px ) rotateX( -180deg ) }
.flip3D:hover > .back { transform: perspective( 800px ) rotateX( 0deg ) }

.flip3D-wide:hover > .front-wide { transform: perspective( 800px ) rotateX( -180deg ) }
.flip3D-wide:hover > .back-wide { transform: perspective( 800px ) rotateX( 0deg ) }