.Karte {
        position: relative;
        float: left;
        width: 150px;
        height: 150px;
        margin-right: 20px;
        margin-bottom: 15px;
        perspective: 500px;
    }
    .Karte.v:hover .front{
        transform: rotateX(180deg);
    }
    .Karte.v:hover .back{
        transform: rotateX(0deg);
    }
    .Karte.v .back{
        transform: rotateX(-180deg);
    }
    .Karte.h:hover .front{
        transform: rotateY(180deg);
    }
    .Karte.h:hover .back{
        transform: rotateY(0deg);
    }
    .Karte.h .back{
        transform: rotateY(-180deg);
    }
    .Karte .front img{
        width: 100%;
        height: auto;
    }
    .Karte .front, .Karte .back
    {
        position:absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        /*transition: all 0.5s ease-in;*/
        transform-style: preserve-3d;
        transition: transform 0.5s;
        color: white;
        background-color: #26c;
        backface-visibility: hidden;
        box-shadow: 3px 3px 15px 0px #888;
    }
    .Karte .back{
        padding: 10px;
    }
    .Karte .front{
        background: #fff;
    }