WebKit Perspective Transform Function

HTML

<h1>Transform Perspective Function</h1>

<p>Yar, 3D transform be ahead. All modern browsers.</p>

<h2>Hover for flipping action</h2>

<div id="ptfn-example1" class="ptfn-container">
    <div class="alpha"></div>
    <div class="beta"></div>
</div>

<h2>Uses perspective transform function</h2>

<pre><code>#ptfn-example2 div {
  -webkit-transform: perspective(800) rotateY(45deg);
  transform: perspective(800px) rotateY(45deg);
}</code></pre>

<div id="ptfn-example2" class="ptfn-container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<h2>Parent has perspective. Children inherit</h2>

<pre><code>#ptfn-example3 {
  -webkit-perspective: 800;
  perspective: 800px;
}

#ptfn-example3 div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}</code></pre>

<div id="ptfn-example3" class="ptfn-container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

h1, h2, p {
    margin-bottom: 0.8em;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h2 {
    font-size: 18px;
    font-weight: bold;
}
.ptfn-container {
    width: 360px;
    height: 360px;
    background: #DDD;
    margin-bottom: 40px;
}
#ptfn-example1 {
    position: relative;
}
#ptfn-example1 div {
    position: absolute;
    width: 280px;
    height: 280px;
    margin: 40px;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#ptfn-example1:hover {
    background: #EE8;
}
#ptfn-example1 .alpha {
    background: blue;
    -webkit-transform: perspective(800) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
}
#ptfn-example1:hover .alpha {
    -webkit-transform: perspective(800) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
}
#ptfn-example1 .beta {
    background: red;
    -webkit-transform: perspective(800) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
}
#ptfn-example1:hover .beta {
    -webkit-transform: perspective(800) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
}
#ptfn-example2 {
    width: 360px;
    height: 360px;
    background: #DDD;
    margin-bottom: 40px;
}
#ptfn-example2 div, #ptfn-example3 div {
    width: 100px;
    height: 100px;
    float: left;
    background: red;
    margin: 10px;
}
#ptfn-example2 div {
    -webkit-transform: perspective(800) rotateY(45deg);
    transform: perspective(800px) rotateY(45deg);
}
#ptfn-example3 {
    -webkit-perspective: 800;
    perspective: 800px;
}
#ptfn-example3 div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
}