title: CSS unknown property "transform"
body: <p>I am having some problems with my stylesheet. I am trying to do some funny hover effects, but somehow I can't use transform. Can anyone help me? The error occurs down below the comment "view one".</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" /&gt;
      &lt;head&gt;
          &lt;title&gt;thomasteilmann.dk&lt;/title&gt;    
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;h1&gt;&lt;img src="teilmann.jpg" alt="Sick Logo" /&gt;&lt;/a&gt;&lt;/h1&gt;
              Copyright Thomas Teilmann
          &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div class="view view-first"&gt;
              &lt;img src="images/cosmic_art_icon.jpg"/&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Cosmic Art&lt;/h2&gt;
                  &lt;p&gt;A galleri of cosmic art made in Photoshop&lt;/p&gt;
                  &lt;a href="#" class="info"&gt;View&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background: #21211f;
      width: 902px;
      font-family: helvetica, arial, sans-serif;
      margin: 0 auto;
      padding: 40px 0 0 0;
  }
  
  .header{
      position: absolute;
      width: 185px;
  }
  
  h1 img{
      float: left;
      padding: 0;
  
      margin: 0;
  }
  
  #navbar ul {
      position: absolute;
      margin-left: 190px;
      padding: 5px;
      list-style-type: none;
      text-align: center;
      background-color: white;
      width: 692px;
      margin-top: 65px;
  }
  
  #navbar ul li {
      display: inline;
  }
  
  #navbar ul li a {
      text-decoration: none;
      padding: .2em 1em;
      font-family: Georgia, times, serif;
      color: black;
      background-color: white;
  }
  
  #navbar ul li a:hover {
      color: black;
      background-color: #fff;
  }
  
  #content{
      width: 612px;
      background: #466287 url(images/corner.jpg) top right no-repeat;
      line-height: 22px;
      font-size: 18px;
      font-family: Georgia, times, serif;
      margin: 0 0 10px 0;
      float: left;
      color: #ffffff;
      margin-left: 190px;
      margin-top: 100px;
      padding: 20px 60px 20px 30px;
  }
  
  
  img {
      border: none;
  }
  
  .form{
      margin: 15px 0;
      padding: 20px 0 20px 0;
      background: url(form1.jpg) no-repeat;
      font-family: helvetica, arial, sans-serif;
  }
  
  
  /*
   * View
  */
  
  .view {
      width: 279px;
      height: 198px;
      margin: 10px;
      float: left;
      border: 5px solid white;
      overflow: hidden;
      position: relative;
      text-align: center;
      box-shadow: 1px 2px 2px #e6e6e6;
      cursor: default;
      background: #fff url(../images/bgimg.jpg) no-repeat center center;
  }
  .view .mask, .view .content {
      width: 279px;
      height: 198px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
  }
  .view img {
      display: block;
      position: relative;
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.8);
      margin: 20px 0 0 0;
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      position: relative;
      color: #fff;
      padding: 10px 20px 20px;
      text-align: center;
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 14px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000;
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000;
  }
  
  
  /* View one
  */
  
  .view-first img {
      transition: all 0.2s linear;
  }
  .view-first .mask {
      opacity: 0;
      background-color: rgba(219,127,8, 0.7);
      transition: all 0.4s ease-in-out;
  }
  .view-first h2 {
      transform: translateY(-100px);
      opacity: 0;
      transition: all 0.2s ease-in-out;
  }
  .view-first p {
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.2s linear;
  }
  .view-first a.info{
      opacity: 0;
      transition: all 0.2s ease-in-out;
  }
  
  .view-first:hover img {
      transform: scale(1.1);
  }
  .view-first:hover .mask {
      opacity: 1;
  }
  .view-first:hover h2,
  .view-first:hover p,
  .view-first:hover a.info {
      opacity: 1;
      transform: translateY(0px);
  }
  .view-first:hover p {
      transition-delay: 0.1s;
  }
  .view-first:hover a.info {
      transition-delay: 0.2s;
  }
  </code></pre>