<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transforms</title>
<style>
  #threed-example {
    margin: 50px 20px;
    -webkit-transform: rotateZ(5deg);
    -moz-transform: rotateZ(5deg);
    -o-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
    -webkit-transition: -webkit-transform 2s ease-in-out;
    -moz-transition: -moz-transform 2s ease-in-out;
    -o-transition: -o-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
  }
  #threed-example:hover {
    -webkit-transform: rotateZ(-5deg);
    -moz-transform: rotateZ(-5deg);
    -o-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
</style>
</head>
<body>
        <div class="slide styling" id="css-transforms">
          <header><span class="css">CSS</span> <h1>Transforms</h1></header>
          <section>
            <p class="center">
              Hover over me:
            </p>
            <pre id="threed-example">-webkit-<b>transform</b>: <b>rotateY</b>(45deg);
-webkit-transform: <b>scaleX</b>(25deg);
-webkit-transform: <b>translate3d</b>(0, 0, 90deg);
-webkit-transform: <b>perspective</b>(500px)
</pre>

<pre>#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}
</pre>

            <p class="center">
              Now press <span class="key">3</span>!
            </p>
          </section>
        </div>
</body>
</html>