Stereo3D

dabblet.css

/* Stereo3D */
.container { width: 960px; margin: 0 auto }
.left,.right { width: 50%; height: 100%; overflow: hidden }
.left { float: left }
.right { float: right }
.left .stage { perspective-origin: 63.5% -340px }
.right .stage { perspective-origin: 36.5% -340px }
.stage { width: 480px; height: 500px; 
	margin: 10px auto; position: relative; 
	animation: introduceCube 1.5s ease-out; perspective: 1600px }
.stage .cube { transform-style: preserve-3d; transform-origin: 100px 50%; 
	animation: rotate 10s infinite linear; 
	position: absolute; top: 120px; left: 140px }
.stage .cube span { display: block; width: 200px; height: 200px; 
	position: absolute; font-size: 100px; text-align: center; 
	line-height: 200px; color: white; opacity: .5 }

span { background-color: red }
.stage .back { transform: rotateY(180deg) translateZ(100px) }
.stage .top { transform: rotateX(90deg) translateZ(100px) }
.stage .bottom { transform: rotateX(-90deg) translateZ(100px) }
.stage .left { transform: rotateY(-90deg) translateZ(100px) }
.stage .right { transform: rotateY(90deg) translateZ(100px) }
.stage .front { transform: translateZ(100px) }
@keyframes rotate { 
	0% { transform: rotateY(0) }
	100% { transform: rotateY(-360deg) }}
@keyframes introduceCube { 
	0% { opacity: 0; top: transform: scale(.6) }
	20% { opacity: 1 }
	100% { top: 0; transform: scale(1) }}	

/* https: //cssanimation.rocks/stereoscopic/ */

dabblet.html

<div class="container">
<div class="left">
<div class="stage">
<figure class="cube">
<span class="back">S</span>
<span class="top"></span>
<span class="bottom"></span>
<span class="left">3D!</span>
<span class="right">S</span>
<span class="front">C</span>
</figure>
</div>
</div>
<div class="right">
<div class="stage">
<figure class="cube">
<span class="back">S</span>
<span class="top"></span>
<span class="bottom"></span>
<span class="left">3D!</span>
<span class="right">S</span>
<span class="front">C</span>
</figure>
</div>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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