Edit in JSFiddle

/*
 * Note: this stylesheet was generated by SASS/Compass,
 * and it's SASS source is called test1.scss.
 */
/* line 25, ../sass/test1.scss */
.transforms-container {
  position: relative;
  width: 290px;
  height: 290px;
  margin: 10px auto;
  border: solid 1px #808080;
  overflow: hidden;
}
/* line 39, ../sass/test1.scss */
.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;
}
/* 
 * .regular-transform in rotated in the usual way 
 */
/* line 62, ../sass/test1.scss */
.animation-example.regular-transform {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
/* 
 * .with-perspective is rotated with perspective(1px) at the beginning,
 * which smooths out the fonts in Firefox and Chrome.  Note 
 * -ms-transform does not have the perspective() call, since it
 * breaks the transform in IE9, due to its lack of 3D transform
 * support.
 */
/* line 73, ../sass/test1.scss */
.animation-example.with-perspective {
  -webkit-transform: perspective(1px) rotate(-10deg);
  -moz-transform: perspective(1px) rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: perspective(1px) rotate(-10deg);
}
/* line 86, ../sass/test1.scss */
.animation-example,
.animation-example em {
  font-family: "Times New Roman", "Times Roman", serif;
}
/* line 91, ../sass/test1.scss */
.animation-example,
.animation-example code {
  color: white;
}
/* line 95, ../sass/test1.scss */
.animation-example code {
  font-family: "Consolas", fixed;
  font-size: 15px;
}
/* line 100, ../sass/test1.scss */
.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: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
/* line 118, ../sass/test1.scss */
.animation-example.with-perspective:hover {
  -webkit-transform: perspective(1px) rotate(0deg) !important;
  -moz-transform: perspective(1px) rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  -o-transform: rotate(0deg) !important;
  transform: perspective(1px) rotate(0deg) !important;
}
/*
 * IE Fixes
 */
/* line 132, ../sass/test1.scss */
body.ie8down .animation-example.with-perspective,
body.ie8down .animation-example.regular-transform {
  position: absolute;
  /* 
   * equiv to rotate(-10deg) .. from my IE Transform Translator
   * http://www.useragentman.com/IETransformsTranslator/
   */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081, M12=0.17364817766692991, M21=-0.17364817766692991, M22=0.9848077530122081, SizingMethod='auto expand');
  /*
   * To make the transform-origin be the middle of
   * the object.    Note: These numbers
   * are approximations.  For more accurate results,
   * use Internet Explorer with this tool.
   */
  left: -20px;
  top: -20px;
}
/* line 158, ../sass/test1.scss */
body.ie8down .animation-example.with-perspective:hover,
body.ie8down .animation-example.regular-transform:hover {
  filter: none;
  top: 0;
  left: 0;
}
/* For the blog post */
/* line 165, ../sass/test1.scss */
#content p.animation-example-quote {
  font-size: 18px !important;
}
/* line 168, ../sass/test1.scss */
footer {
  text-align: right;
}

<div class="transforms-container">
    <!-- Add your site or application content here -->
    <blockquote class="animation-example regular-transform with-border-fix">
        <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>