fightinjoe/gist:552970

## gistfile1.html
<html>
  <head>
    <title>Normal Image</title>
    <style type="text/css" media="screen">
      body {
        padding: 1em 5em;
      }

      div {
        width:200px;
        height:100px;
        background:Red;
        position:absolute;
        top:100px;
        z-index:2;
      }

      body {
        /*== must be set on the parent element ==*/
        -webkit-perspective: 1000;
      }

      .clip {
        z-index:1;
        width:100px;
        height:200px;
        top:50px;
        left:100px;
        background:Blue;
        -webkit-transition: all 0.4s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform:rotateY(-15deg);
      }

    </style>
  </head>
  <body>
    <p>
      Clipping of 3d CSS rotations of an element occurs when a previous sibling in the DOM has a
      lower z-index than the element.
    </p>
    <p>Blue appears first in the DOM, but Red has a higher z-index of 2</p>
    <div style="z-index:1" class="clip"></div>
    <div style="z-index:2"></div>
  </body>
</html>
	<html>
	<head>
	<title>Normal Image</title>
	<style type="text/css" media="screen">
	body {
	padding: 1em 5em;
	}

	div {
	width:200px;
	height:100px;
	background:Red;
	position:absolute;
	top:100px;
	z-index:2;
	}

	body {
	/== must be set on the parent element ==/
	-webkit-perspective: 1000;
	}

	.clip {
	z-index:1;
	width:100px;
	height:200px;
	top:50px;
	left:100px;
	background:Blue;
	-webkit-transition: all 0.4s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-webkit-transform:rotateY(-15deg);
	}

	</style>
	</head>
	<body>
	<p>
	Clipping of 3d CSS rotations of an element occurs when a previous sibling in the DOM has a
	lower z-index than the element.
	</p>
	<p>Blue appears first in the DOM, but Red has a higher z-index of 2</p>
	<div style="z-index:1" class="clip"></div>
	<div style="z-index:2"></div>
	</body>
	</html>