Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
3D Cube for tabbed content

3D Cube for tabbed content

Fun way to display tabbed content with a 3d cube: Uses CSS perspective, transitions and radio checked. No javascript.

A Pen by Kara Olthof on CodePen.

License.

<div class="perspective">
<label class="tab" for="tab-top">TOP</label>
<label class="tab" for="tab-front">FRONT</label>
<label class="tab" for="tab-bottom">BOTTOM</label>
<input type="radio" name="tabs" id="tab-top">
<input type="radio" name="tabs" id="tab-front">
<input type="radio" name="tabs" id="tab-bottom">
<div class="cube">
<div class="tab-content">
<h1>TOP CONTENT</h1>
<p>THIS IS AWESOME</p>
</div>
<div class="tab-content">
<h1>FRONT CONTENT</h1>
<p>THIS IS COOL</p>
</div>
<div class="tab-content">
<h1>BOTTOM CONTENT</h1>
<p>THIS IS SWEET</p>
</div>
</div>
</div>
body {
background: #F8FFE5;
}
.perspective {
perspective: 76em;
perspective-origin: 50% 50px;
width: 494px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
text-align: center;
}
input {
display: none;
}
.tab {
position: absolute;
width: 80px;
height: 70px;
background: pink;
right: 0;
line-height: 70px;
font-weight: 300;
&:nth-child(1) {
top: -5px;
background: #06D6A0;
}
&:nth-child(2) {
top: 69px;
background: #1B9AAA;
}
&:nth-child(3) {
top: 143px;
background: #EF476F;
}
}
.cube {
position: relative;
margin: 60px auto 0;
width: 300px;
height: 200px;
transform-origin: 0 100px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in;
}
.tab-content {
width: 300px;
height: 200px;
position: absolute;
h1 {
font-size: 25px;
margin: 75px 0 10px;
font-weight: 300;
}
p {
font-size: 12px;
}
&:nth-child(2) {
transform: translateZ(100px);
background: #1B9AAA;
}
&:nth-child(1) {
transform: rotateX(-270deg)
translateY(-100px);
transform-origin: top left;
background: #06D6A0;
}
&:nth-child(3) {
transform: rotateX(-90deg)
translateY(100px);
transform-origin: bottom center;
background: #EF476F;
}
}
#tab-top:checked ~ .cube {
transform: rotateX(-90deg);
}
#tab-front:checked ~ .cube {
transform: rotateX(0deg);
}
#tab-bottom:checked ~ .cube {
transform: rotateX(90deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment