dkdndes/jsbin.EdEWusoS.css

## jsbin.EdEWusoS.css
    body {
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
    }
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 50px 100px;
      border: 2px solid blue;
      -webkit-perspective: 500;
    }

    #parent {
      margin: 10px;
      width: 280px;
      height: 280px;
      background-color: #844BCA;
      opacity: 0.8;
      -webkit-transform-style: preserve-3d;
      -webkit-animation: spin 10s infinite linear;
    }

    #container:hover #parent {
      -webkit-transform-style: flat;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }

    #parent > div {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 200px;
      height: 200px;
      padding: 10px;
      -webkit-box-sizing: border-box;
      font-family: monospace;
      font-size: 12pt;
    }

    #parent > :first-child {
      background-color: #49DC93;
      -webkit-transform: translateZ(-100px) rotateY(45deg);
    }

    #parent > :last-child {
      background-color: #FF6;
      -webkit-transform: translateZ(50px) rotateX(20deg);
      -webkit-transform-origin: 50% top;
    }

## jsbin.EdEWusoS.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <div id="container">
    <div id="parent">
      <div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div>
      <div>-webkit-transform: translateZ(50px) rotateX(20deg);</div>
    </div>
  </div>

  <h1>Transform Style</h1>
  <p>This example shows the effect of <code>-webkit-transform-style</code>. The blue box has perspective set on it.
    The purple box has
<pre>
  -webkit-transform-style: preserve-3d;
</pre>
  <p>which allows the yellow and green boxes to live in a shared 3D space, and thus appear to stand away
    from the purple box by virtue of their transforms.
  </p>
  <p>
    However, when you hover, we set the purple box to:
  </p>
<pre>
  -webkit-transform-style: flat;
</pre>
  <p>so its children collapse into it. Their <code>-webkit-transform</code> still applies, but now
    it's just a painting effect, and is not affected by the container's perspective.
  </p>
</body>
</html>
	body {
	font-family: 'Lucida Grande', Verdana, Arial;
	font-size: 12px;
	}
	#container {
	position: relative;
	height: 300px;
	width: 300px;
	margin: 50px 100px;
	border: 2px solid blue;
	-webkit-perspective: 500;
	}

	#parent {
	margin: 10px;
	width: 280px;
	height: 280px;
	background-color: #844BCA;
	opacity: 0.8;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: spin 10s infinite linear;
	}

	#container:hover #parent {
	-webkit-transform-style: flat;
	}

	@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0); }
	to { -webkit-transform: rotateY(360deg); }
	}

	#parent > div {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 200px;
	height: 200px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	font-family: monospace;
	font-size: 12pt;
	}

	#parent > :first-child {
	background-color: #49DC93;
	-webkit-transform: translateZ(-100px) rotateY(45deg);
	}

	#parent > :last-child {
	background-color: #FF6;
	-webkit-transform: translateZ(50px) rotateX(20deg);
	-webkit-transform-origin: 50% top;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="container">
	<div id="parent">
	<div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div>
	<div>-webkit-transform: translateZ(50px) rotateX(20deg);</div>
	</div>
	</div>

	<h1>Transform Style</h1>
	<p>This example shows the effect of <code>-webkit-transform-style</code>. The blue box has perspective set on it.
	The purple box has
	<pre>
	-webkit-transform-style: preserve-3d;
	</pre>
	<p>which allows the yellow and green boxes to live in a shared 3D space, and thus appear to stand away
	from the purple box by virtue of their transforms.
	</p>
	<p>
	However, when you hover, we set the purple box to:
	</p>
	<pre>
	-webkit-transform-style: flat;
	</pre>
	<p>so its children collapse into it. Their <code>-webkit-transform</code> still applies, but now
	it's just a painting effect, and is not affected by the container's perspective.
	</p>
	</body>
	</html>