Flip box in X axis

flip_box_X.html

<div class="scene3D col-md-3">
    <div class="flip">
        <div class="card__front" style="background: url('<?php echo $obraz_wyrozniajacy; ?>') center no-repeat; background-size:cover;">
        </div>
<!-- This is the Front View-->
        <div class="card__back" style="background: url('<?php echo $logo; ?>') center no-repeat; background-size:cover;">
        </div>
    </div>
</div>

<style>
  .scene3D {
    	    display: block;
    	    float: left;
    	    /*border-radius*/
    	    -webkit-border-radius: 5px;
    	    -moz-border-radius: 5px;
    	    border-radius: 5px;
  }
	.scene3D:hover .flip {
	    /*transform*/
	    -webkit-transform: rotateX(180deg);
	    -moz-transform: rotateX(180deg);
	    -ms-transform: rotateX(180deg);
	    -o-transform: rotateX(180deg);
	    transform: rotateX(180deg);
	}
	.flip {
	    width: 100%;
	    height: 250px;
	    /*border-radius*/
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    /*box-shadow*/
	    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
	    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
	    box-shadow: 0 0 15px rgba(0,0,0,0.3);
	    /*transform*/
	    -webkit-transform: rotateX(0deg);
	    -moz-transform: rotateX(0deg);
	    -ms-transform: rotateX(0deg);
	    -o-transform: rotateX(0deg);
	    transform: rotateX(0deg);
	    /*transition*/
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
	    /*transform-style*/
	    -webkit-transform-style: preserve-3d;
	    -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	    -o-transform-style: preserve-3d;
	    transform-style: preserve-3d;
	}
	img {
	    height: 100px;
	    width: 100px;
	    /*border-radius*/
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	}

	.flip div {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    /*border-radius*/
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    /*backface-visibility*/
	    -webkit-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -o-backface-visibility: hidden;
	    backface-visibility: hidden;
	}
	.flip div:first-child {
	    /*border-radius*/
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    background: #333;
	    /*transform*/
	    -webkit-transform: rotateX(180deg);
	    -moz-transform: rotateX(180deg);
	    -ms-transform: rotateX(180deg);
	    -o-transform: rotateX(180deg);
	    transform: rotateX(180deg);
	}
	.flip div:first-child p {
	    color: #FFF;
	    text-shadow: 0 0 1px .111;
	    padding-top: 50px;
	    text-align: center;
	}
</style>