WebKit Perspective Transform Function

by sebastianauer

HTML

<h1>WebKit Transform Perspective Function</h1>

<p>Yar, 3D transform be ahead. Safari only.</p>

<h2>Hover for flipping action</h2>

<div id="wkptfn-example1" class="wkptfn-container">

  <div class="alpha"></div>
  <div class="beta"></div>
</div>

<h2>Uses perspective transform function</h2>

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

<div id="wkptfn-example2" class="wkptfn-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>#wkptfn-example3 {
  -webkit-perspective: 800;
}

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

<div id="wkptfn-example3" class="wkptfn-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; }

.wkptfn-container {
  width: 360px;
  height: 360px;
  background: #DDD;
  margin-bottom: 40px;
}

#wkptfn-example1 {
  position: relative;
}

#wkptfn-example1 div {
  position: absolute;
  width: 280px;
  height: 280px;
  margin: 40px;
  -webkit-transition: -webkit-transform 1s;
  -webkit-backface-visibility: hidden;
}

#wkptfn-example1:hover {
  background: #EE8;
}

#wkptfn-example1 .alpha {
  background: blue;
  -webkit-transform: perspective(800) rotateY( 0deg);
}

#wkptfn-example1:hover .alpha {
  -webkit-transform: perspective(800) rotateY(-180deg);      
}


#wkptfn-example1 .beta {
  background: red;
  -webkit-transform: perspective(800) rotateY(180deg);
}

#wkptfn-example1:hover .beta {
  -webkit-transform: perspective(800) rotateY( 0deg);
}

#wkptfn-example2 {
  width: 360px;
  height: 360px;
  background: #DDD;
  margin-bottom: 40px;
}

#wkptfn-example2 div,
#wkptfn-example3 div {
  width: 100px;
  height: 100px;
  float: left;
  background: red;
  margin: 10px;
}

#wkptfn-example2 div {
  -webkit-transform: perspective(800) rotateY(45deg);
}

#wkptfn-example3 {
  -webkit-perspective: 800;
}

#wkptfn-example3 div {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
}