CSS 2D Tranform Example2

HTML

<div class="transforms-container">
    <!-- Add your site or application content here -->
    
    
    <blockquote class="animation-example with-perspective">
        <p class="animation-example-quote">I have cherished the ideal of a democratic and free society in which all persons will live together in harmony and with equal opportunities. It is an ideal for which I hope to live for and to see realised. But, My Lord, if it needs be, it is an ideal for which I am prepared to die.</p>
        <footer><cite>Nelson Mandela</cite></footer>
    </blockquote>
</div>

CSS

.transforms-container {
  position: relative;
  width: 290px;
  height: 290px;
  margin: 10px auto;
  border: solid 1px #808080;
  overflow: hidden;
}
.animation-example {
  width: 240px;
  height: 240px;
  left: -40px;
  top: -18px;
  position: absolute;
  border: solid 5px red;
  font-size: 18px;
  background-color: green;
  margin-bottom: 100px;
  padding: 20px;
  display: block;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}

.animation-example.regular-transform {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.animation-example.with-perspective {
  -webkit-transform: perspective(1px) rotate(-10deg);
  -moz-transform: perspective(1px) rotate(-10deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: perspective(1px) rotate(-10deg);
}

.animation-example,
.animation-example em {
  font-family: "Times New Roman", "Times Roman", serif;
}

.animation-example,
.animation-example code {
  color: white;
}

.animation-example code {
  font-family: "Consolas", fixed;
  font-size: 15px;
}

.animation-example.with-border-fix {
  	/*
       * The fix for WebKit/Blink browsers.
       */
  -webkit-backface-visibility: hidden;
  /*
   * Here is the fix for Firefox
   */
  filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
}

/* line 114, ../sass/test1.scss */
.animation-example.regular-transform:hover {
  -webkit-transform: rotate(0deg) !important;
  -moz-transform: rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  -o-transform:...