A CodePen by Tim Pietrusky. Anti-aliasing on video - Enable anti-aliasing on video with ```transform-style: preserve-3d```. This is for the [question from Sam Saccone via twitter](https://twitter.com/sam_saccone/status/324216842300317696): do you have any ideas about anti aliasing for a 3d transformed video element? example: mojotech.com

index.html

 <section>
  <h2>Anti-aliasing on video with "transform-style:preserve-3d"</h2>
  <video autoplay>
    <source src="http://www.mojotech.com/videos/snowcast.mp4" type="video/mp4">
    <source src="http://www.mojotech.com/videos/snowcast.webm" type="video/webm">
    <source src="http://www.mojotech.com/videos/snowcast.ogv" type="video/ogg">
  </video>
</section>

script.js

/**
  Anti-aliasing on video
  
  Enable anti-aliasing on video with "transform-style: preserve-3d".
  
  This is for the question from Sam Saccone via twitter
  "do you have any ideas about anti aliasing for 
  a 3d transformed video element? example: mojotech.com"
  https://twitter.com/sam_saccone/status/324216842300317696
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
section {
  margin:0 0 0 2em;
  max-width:50em;
  
  /* 
   * "enable" anti-aliasing on child elements
   * by adding "transform-style" on the parent
   */
  @include transform-style(preserve-3d);
  
  h2 {
    font:bold 1.5em/1.5em sans-serif;
    float:left;
    max-width:50%;
  }
  
  video {
    width: 225px;
    border: solid 3px transparent;
    display: block;
    @include transform(rotateZ(-1.9deg) rotateX(21deg));
  }
}