Following on from http://magicduel.invisionzone.com/topic/14318-personal-page-template-the-white-cube-for-documents/, I have created version 2 which gives you more freedom, more faces to the cube and follows the separation of concerns. For any caveats see original template.
[log='CSS']
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.stage {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-persective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.cube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-ms-transition: -ms-transform 1s;
transition: transform 1s;
position: relative;
width: 500px;
height: 500px;
margin: 150px auto;
}
.cube .face {
width: 100%;
height: 100%;
position: absolute;
background: white;
padding: 1em;
overflow: auto;
border: solid 1px grey;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 1s 1s;
-moz-transition: opacity 1s 1s;
-o-transition: opacity 1s 1s;
-ms-transition: opacity 1s 1s;
transition: opacity 1s 1s;
}
.cube .face * {
background: white !important;
}
.cube .face.top {
-webkit-transform: rotateX(90deg) translateZ(250px);
-moz-transform: rotateX(90deg) translateZ(250px);
-o-transform: rotateX(90deg) translateZ(250px);
-ms-transform: rotateX(90deg) translateZ(250px);
transform: rotateX(90deg) translateZ(250px);
}
.cube .face.top-interior {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.bottom {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
}
.cube .face.bottom-interior {
-webkit-transform: rotateX(90deg) translateZ(-250px);
-moz-transform: rotateX(90deg) translateZ(-250px);
-o-transform: rotateX(90deg) translateZ(-250px);
-ms-transform: rotateX(90deg) translateZ(-250px);
transform: rotateX(90deg) translateZ(-250px);
}
.cube .face.left {
-webkit-transform: rotateY(-90deg) translateZ(250px);
-moz-transform: rotateY(-90deg) translateZ(250px);
-o-transform: rotateY(-90deg) translateZ(250px);
-ms-transform: rotateY(-90deg) translateZ(250px);
transform: rotateY(-90deg) translateZ(250px);
}
.cube .face.left-interior {
-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.right {
-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
transform: rotateY(90deg) rotate(180deg) translateZ(250px);
}
.cube .face.right-interior {
-webkit-transform: rotateY(-90deg) translateZ(-250px);
-moz-transform: rotateY(-90deg) translateZ(-250px);
-o-transform: rotateY(-90deg) translateZ(-250px);
-ms-transform: rotateY(-90deg) translateZ(-250px);
transform: rotateY(-90deg) translateZ(-250px);
}
.cube .face.front {
-webkit-transform: translateZ(250px);
-moz-transform: translateZ(250px);
-o-transform: translateZ(250px);
-ms-transform: translateZ(250px);
transform: translateZ(250px);
}
.cube .face.front-interior {
-webkit-transform: rotateY(180deg) translateZ(-250px);
-moz-transform: rotateY(180deg) translateZ(-250px);
-o-transform: rotateY(180deg) translateZ(-250px);
-ms-transform: rotateY(180deg) translateZ(-250px);
transform: rotateY(180deg) translateZ(-250px);
}
.cube .face.back {
-webkit-transform: rotateY(180deg) translateZ(250px);
-moz-transform: rotateY(180deg) translateZ(250px);
-o-transform: rotateY(180deg) translateZ(250px);
-ms-transform: rotateY(180deg) translateZ(250px);
transform: rotateY(180deg) translateZ(250px);
}
.cube .face.back-interior {
-webkit-transform: translateZ(-250px);
-moz-transform: translateZ(-250px);
-o-transform: translateZ(-250px);
-ms-transform: translateZ(-250px);
transform: translateZ(-250px);
}
.cube[data-face="top"], .cube[data-face="bottom-interior"] {
-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="bottom"], .cube[data-face="top-interior"] {
-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="front"], .cube[data-face="back-interior"] {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="left"], .cube[data-face="right-interior"] {
-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
.cube[data-face="right"], .cube[data-face="left-interior"] {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
.cube[data-face="back"], .cube[data-face="front-interior"] {
-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="bottom-interior"] .face.top,
.cube[data-face="top-interior"] .face.bottom,
.cube[data-face="back-interior"] .face.front,
.cube[data-face="right-interior"] .face.left,
.cube[data-face="left-interior"] .face.right,
.cube[data-face="front-interior"] .face.back {
opacity: 0;
pointer-events: none;
}
[onclick] {
cursor: pointer;
}
[/log]
[log='jQuery']
// Inlined in link 'onclick' attribute. Links follow the genre of:
$('.cube').attr({'data-face': /*face-name*/});
// Where /*face-name*/ is replaced with one of:
// 'top', 'top-interior', 'bottom', 'bottom-interior', 'left', 'left-interior', 'right', 'right-interior', 'front', 'front-interior', 'back' or 'back-interior'
[/log]
[log='HTML']
<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
<a onclick="$('.cube').attr({'data-face': 'top'});">
<img src="/img/skin/default/mdadocs1.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'bottom'});">
<img src="/img/skin/default/mdadocs2.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'front'});">
<img src="/img/skin/default/mdadocs3.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'left'});">
<img src="/img/skin/default/mdadocs4.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'right'});">
<img src="/img/skin/default/mdadocs5.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'back'});">
<img src="/img/skin/default/mdadocs6.gif">
</a>
</div>
<div style="text-align: center;">
<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>
<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>
<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>
<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>
<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>
<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
</div>
<div class="stage">
<div class="cube">
<div class="face top">[doc1]</div>
<div class="face top-interior">1</div>
<div class="face bottom">[doc2]</div>
<div class="face bottom-interior">2</div>
<div class="face front">[doc3]</div>
<div class="face front-interior">3</div>
<div class="face left">[doc4]</div>
<div class="face left-interior">4</div>
<div class="face right">[doc5]</div>
<div class="face right-interior">5</div>
<div class="face back">[doc6]</div>
<div class="face back-interior">6</div>
</div>
</div>
[/log]
To add to your personal page, switch to HTML and copy the 'Everything' section into the HTML area.
[log='Everything']
<!doctype html>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.stage {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-persective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.cube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-ms-transition: -ms-transform 1s;
transition: transform 1s;
position: relative;
width: 500px;
height: 500px;
margin: 150px auto;
}
.cube .face {
width: 100%;
height: 100%;
position: absolute;
background: white;
padding: 1em;
overflow: auto;
border: solid 1px grey;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 1s 1s;
-moz-transition: opacity 1s 1s;
-o-transition: opacity 1s 1s;
-ms-transition: opacity 1s 1s;
transition: opacity 1s 1s;
}
.cube .face * {
background: white !important;
}
.cube .face.top {
-webkit-transform: rotateX(90deg) translateZ(250px);
-moz-transform: rotateX(90deg) translateZ(250px);
-o-transform: rotateX(90deg) translateZ(250px);
-ms-transform: rotateX(90deg) translateZ(250px);
transform: rotateX(90deg) translateZ(250px);
}
.cube .face.top-interior {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.bottom {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
}
.cube .face.bottom-interior {
-webkit-transform: rotateX(90deg) translateZ(-250px);
-moz-transform: rotateX(90deg) translateZ(-250px);
-o-transform: rotateX(90deg) translateZ(-250px);
-ms-transform: rotateX(90deg) translateZ(-250px);
transform: rotateX(90deg) translateZ(-250px);
}
.cube .face.left {
-webkit-transform: rotateY(-90deg) translateZ(250px);
-moz-transform: rotateY(-90deg) translateZ(250px);
-o-transform: rotateY(-90deg) translateZ(250px);
-ms-transform: rotateY(-90deg) translateZ(250px);
transform: rotateY(-90deg) translateZ(250px);
}
.cube .face.left-interior {
-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.right {
-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
transform: rotateY(90deg) rotate(180deg) translateZ(250px);
}
.cube .face.right-interior {
-webkit-transform: rotateY(-90deg) translateZ(-250px);
-moz-transform: rotateY(-90deg) translateZ(-250px);
-o-transform: rotateY(-90deg) translateZ(-250px);
-ms-transform: rotateY(-90deg) translateZ(-250px);
transform: rotateY(-90deg) translateZ(-250px);
}
.cube .face.front {
-webkit-transform: translateZ(250px);
-moz-transform: translateZ(250px);
-o-transform: translateZ(250px);
-ms-transform: translateZ(250px);
transform: translateZ(250px);
}
.cube .face.front-interior {
-webkit-transform: rotateY(180deg) translateZ(-250px);
-moz-transform: rotateY(180deg) translateZ(-250px);
-o-transform: rotateY(180deg) translateZ(-250px);
-ms-transform: rotateY(180deg) translateZ(-250px);
transform: rotateY(180deg) translateZ(-250px);
}
.cube .face.back {
-webkit-transform: rotateY(180deg) translateZ(250px);
-moz-transform: rotateY(180deg) translateZ(250px);
-o-transform: rotateY(180deg) translateZ(250px);
-ms-transform: rotateY(180deg) translateZ(250px);
transform: rotateY(180deg) translateZ(250px);
}
.cube .face.back-interior {
-webkit-transform: translateZ(-250px);
-moz-transform: translateZ(-250px);
-o-transform: translateZ(-250px);
-ms-transform: translateZ(-250px);
transform: translateZ(-250px);
}
.cube[data-face="top"], .cube[data-face="bottom-interior"] {
-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="bottom"], .cube[data-face="top-interior"] {
-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="front"], .cube[data-face="back-interior"] {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="left"], .cube[data-face="right-interior"] {
-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
.cube[data-face="right"], .cube[data-face="left-interior"] {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
.cube[data-face="back"], .cube[data-face="front-interior"] {
-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="bottom-interior"] .face.top,
.cube[data-face="top-interior"] .face.bottom,
.cube[data-face="back-interior"] .face.front,
.cube[data-face="right-interior"] .face.left,
.cube[data-face="left-interior"] .face.right,
.cube[data-face="front-interior"] .face.back {
opacity: 0;
pointer-events: none;
}
[onclick] {
cursor: pointer;
}
</style>
<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
<a onclick="$('.cube').attr({'data-face': 'top'});">
<img src="/img/skin/default/mdadocs1.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'bottom'});">
<img src="/img/skin/default/mdadocs2.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'front'});">
<img src="/img/skin/default/mdadocs3.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'left'});">
<img src="/img/skin/default/mdadocs4.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'right'});">
<img src="/img/skin/default/mdadocs5.gif">
</a>
<a onclick="$('.cube').attr({'data-face': 'back'});">
<img src="/img/skin/default/mdadocs6.gif">
</a>
</div>
<div style="text-align: center;">
<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>
<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>
<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>
<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>
<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>
<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
</div>
<div class="stage">
<div class="cube">
<div class="face top">[doc1]</div>
<div class="face top-interior">1</div>
<div class="face bottom">[doc2]</div>
<div class="face bottom-interior">2</div>
<div class="face front">[doc3]</div>
<div class="face front-interior">3</div>
<div class="face left">[doc4]</div>
<div class="face left-interior">4</div>
<div class="face right">[doc5]</div>
<div class="face right-interior">5</div>
<div class="face back">[doc6]</div>
<div class="face back-interior">6</div>
</div>
</div>
[/log]
Until, I change it, a live preview is shown on my profile page: http://magicduel.com/players/The_Warrior