Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created August 7, 2012 19:52
Show Gist options
  • Save LeaVerou/3288791 to your computer and use it in GitHub Desktop.
Save LeaVerou/3288791 to your computer and use it in GitHub Desktop.
3D cube
/**
* 3D cube
*/
body {
perspective: 99999px;
}
body > section {
display: inline-block;
margin: 0 200px;
transform: rotateX(-30deg) rotateY(45deg);
transform-origin: left;
transform-style: preserve-3d;
}
section > section {
float: left;
width: 100px; height: 100px;
border: 1px dashed white;
background: hsla(220,20%,50%,.5);
color: white;
font-size: 90px; text-align: center;
transform-origin: left;
}
section > section:nth-child(2),
section > section:nth-child(6) {
clear: both;
}
section > section:nth-child(6) {
float: right;
}
section > section:nth-child(1) {
transform: rotateX(90deg);
transform-origin: bottom;
}
section > section:nth-child(3) {
transform: rotateY(90deg);
}
section > section:nth-child(4) {
transform: translateZ(-100px) translateX(-200%);
}
section > section:nth-child(5) {
transform: translateX(-300%) rotateY(90deg);
}
section > section:nth-child(6) {
transform-origin: top;
transform: translateX(-300%) rotateX(90deg) translateY(-100%);
}
<section>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</section>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@sprt
Copy link

sprt commented Aug 7, 2012

Why use section elements?

@iakshay
Copy link

iakshay commented Aug 13, 2012

I think using unordered list would be more semantic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment