transform: translate; (3D)

dabblet.css

/* transform: translate; (3D) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
figure div, figure span {
  -webkit-transition: all 1s;
     -moz-transition: all 1s;
      -ms-transition: all 1s;
       -o-transition: all 1s;
          transition: all 1s;
}

body {
	width: 80%;
	max-width: 42em;
	margin: auto;
	font: 1em/1.5 Georgia, serif;
}
h1 {
	font-weight: normal;
}
hr,
footer {
	margin: 2.5em 0;
}
pre {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
}
pre,
code,
samp,
var {
	word-wrap: break-word;
	white-space: pre-wrap;
}
figure {
	margin-left: 0;
	margin-right: 0;
}

figure div {
  width: 25%;
  height: 100px;
  border: 3px solid #000;
  border-radius: .5em;
  background: rgba(255,255,255,.7);
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
          perspective: 800px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
figure span {
  display: inline-block;
  width: 50%;
  height: 50px;
  border: 3px solid #555;
  border-radius: .5em;
  background: #ddd;
  -webkit-transform: translate3d(0,50px,-50px);
     -moz-transform: translate3d(0,50px,-50px);
      -ms-transform: translate3d(0,50px,-50px);
       -o-transform: translate3d(0,50px,-50px);
          transform: translate3d(0,50px,-50px);
}

figure:hover div {
-webkit-transform: translate3D(280%,0,0);
   -moz-transform: translate3D(280%,0,0);
    -ms-transform: translate3D(280%,0,0);
     -o-transform: translate3D(280%,0,0);
        transform: translate3D(280%,0,0);
}
figure:hover span {
-webkit-transform: translate3D(100%,0,200px);
   -moz-transform: translate3D(100%,0,200px);
    -ms-transform: translate3D(100%,0,200px);
     -o-transform: translate3D(100%,0,200px);
        transform: translate3D(100%,0,200px);
}

dabblet.html

<h1>Example 3 — transform: translate; (3D)</h1>

<figure id="translate3d">
<pre class="callout"><code>.outer-box {
  perspective: 800px;
  transform-style: preserve-3d;
}
.inner-box {transform: translate3d(0,50px,-50px);} /* 50px behind the div */
.outer-box, .inner-box {transition: all 1s;}
.container:hover .outer-box {transform: translate3d(280%,0,0);} /* the same as translate(280%) */
.container:hover .inner-box {transform: translate3d(100%,0,200px);} /* 200px in front of the div */
</code></pre>
<div>
<span></span>
</div>
<figcaption><code>transform: translate3d()</code> on the inner box, starting with a negative value (further away from the viewer and behind the container box), and transitioning to a positive value (closer to the viewer)</figcaption>
</figure>

<hr />

<ul>
	<li><a href="http://dev.w3.org/csswg/css3-3d-transforms/#transform-functions" title="CSS 3D Transforms">CSS 3D Transforms Module Level 3 — Transformation Functions</a></li>
	<li><a href="http://dabblet.com/gist/4180453" title="dabblet.com">This example on Dabblet</a></li>
</ul>

<footer>From <a href="http://thewebevolved.com/"><cite>Beginning HTML5 and CSS3 — The Web Evolved</cite></a>, Chapter 12</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}