Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
/**
* 3D cube via @LeaVerou http://lea.verou.me/2014/04/dynamically-generated-svg-through-sass-a-3d-animated-rgb-cube/
*/
body {
perspective: 600px;
perspective-origin: 300px -90px;
}
.cube, .cube:before, .cube:after,
.cube > div, .cube > div::before, .cube > div::after {
content: "";
position: absolute;
width: 200px; height: 200px;
transform-origin: 0 0;
transform-style: preserve-3d;
}
.cube {
top: 100px; left: 100px;
background: hsla(0,100%,50%,.5);
transform-origin: center;
transform: rotateY(230deg) rotateX(0deg) rotateZ(0deg);
}
.cube > div {
transform-origin: 50% 100%;
transform: rotateX(90deg) rotateY(180deg);
background: hsla(180,100%,50%,.5);
}
.cube::before,
.cube > div::before {
background: hsla(60,100%,50%,.5);
transform: rotateX(-90deg);
}
.cube::after,
.cube > div::after {
background: hsla(120,100%,50%,.5);
transform: rotateY(-90deg) translateX(-100%);
}
.cube > div::before {
background: hsla(240,100%,50%,.5);
}
.cube > div::after {
background: hsla(300,100%,50%,.5);
}
<div class="cube">
<div></div>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.