CSS 2D Tranforms Example1

HTML

<div class="transforms-container">
    <blockquote class="animation-example regular-transform">
        <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

/*
 * 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(-100px) rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: perspective(-100px) 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;
 ...