<div class="ud_book_box">
    <div class="ud_book">
        <div class="ud_ruckseite">
            <div></div>
        </div>
        <h1>CSS Book Flip</h1>
        <div class="ud_cover">
            <div>
                <p>So einfach kann es sein einen coolen effekt zu erstellen!</p>
            </div>
        </div>
    </div>
</div>

/* CSS Document */

body, html {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:url(../img/bg.jpg) no-repeat center center;
  background-size:cover;}
.ud_book_box {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  height: 650px;
  width: 450px;
  perspective: 1800px;
}

.ud_book {
  position: absolut;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: #ff6600;
  transform-style: preserve-3d;
  transform: rotate3d(0, 1, 0, 0);
  transition: all 300ms;
}

.ud_book:hover {
  transform: rotate3d(0, 1, 0, 35deg);
}

.ud_ruckseite {
  position: absolute;
  top: 0;
  left: 0;
  background: #e25a00;
  height: 100%;
  width: 60px;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transform: rotate3d(0, 1, 0, -86deg) translate3d(-100%, 0, 0);
}

.ud_ruckseite div {
  position: absolute;
  bottom:0;
  left: 0;
  height: 100px;
  background: #f3f3f3;
  width: 100%;
}

.ud_cover {
  background: #fff;
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
}

.ud_cover p {
  font-family: 'Oswald', sans-serif;
  padding:20px 0 0 30px;
}

h1 {
  padding: 0;
  margin: 50px 0 0 30px;
  font-size: 50px;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  position: absolute;
  color: #ffffff;
}