Edit in JSFiddle

Result
CSS
HTML

.style_wrap {
  margin: 20px;
  border: 1px solid #ccc;
  width: 400px;
  float: left;
  perspective: 600px;
}

.style_wrap .parent {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ddd;
  transform: rotateX(30deg);
}

.style_wrap .child {
  margin-top: 40px;
  padding: 100px 0;
  width: 100%;
  background-color: #ddd;
  text-align: center;
  color: #999;
  opacity: 0.5;
  transition: all 1s;
}

.style_wrap:hover .child {
  transform: rotateY(-45deg);
}

#style_flat .parent {
  transform-style: flat;
}

#style_preserve .parent {
  transform-style: preserve-3d;
}

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <div id="style_flat" class="style_wrap">
      <div class="parent">transform-style: flat;
        <div class="child">transform: rotateY(-45deg)</div>
      </div>
    </div>
    <div id="style_preserve" class="style_wrap">
      <div class="parent">transform-style: preserve-3d;
        <div class="child">transform: rotateY(-45deg)</div>
      </div>
    </div>
  </body>
</html>