My inspiration for this design was the white cube from story mode.
To maintain the white background the lines
.cube .face * {
background: white !important;
}
were required. If this affects the deign of any of your papers you can easily remove the above lines.
The template uses 3D CSS Transforms to create the cube, so will not work in older browsers (Detailed support can be found at http://caniuse.com/#feat=transforms3d).
It is intended for the 6 personal papers but any face of the cube's content can be changed to allow for other content. Alliance Leader Statement ([doc2]) is not currently one of the imported papers (any reason for this?) so would be an ideal face to add your own content on.
Alternatively, this design could be used as a widget, rather than the whole of your personal page, with content before or after it.
Below is a breakdown of what was used in the design.
[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;
-webkit-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;
}
.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.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.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.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.front {
-webkit-transform: translateZ(250px);
-moz-transform: translateZ(250px);
-o-transform: translateZ(250px);
-ms-transform: translateZ(250px);
transform: 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);
}
[onclick] {
cursor: pointer;
}
[/log]
[log=jQuery]
// Inlined in link 'onclick' attribute. Links follow the genre of:
$('.cube').css({'-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)'});
// where 90deg can be replaced with the angle of rotation about the X, Y and Z axis respectively.
[/log]
[log=HTML]
<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs1.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs2.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs3.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs4.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs5.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs6.gif">
</a>
</div>
<div class="stage">
<div class="cube">
<div class="face top">[doc1]</div>
<div class="face bottom">[doc2]</div>
<div class="face left">[doc4]</div>
<div class="face right">[doc5]</div>
<div class="face front">[doc3]</div>
<div class="face back">[doc6]</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;
-webkit-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;
}
.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.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.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.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.front {
-webkit-transform: translateZ(250px);
-moz-transform: translateZ(250px);
-o-transform: translateZ(250px);
-ms-transform: translateZ(250px);
transform: 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);
}
[onclick] {
cursor: pointer;
}
</style>
<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs1.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs2.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs3.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs4.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs5.gif">
</a>
<a onclick="$('.cube').css({'-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)'});">
<img src="/img/skin/default/mdadocs6.gif">
</a>
</div>
<div class="stage">
<div class="cube">
<div class="face top">[doc1]</div>
<div class="face bottom">[doc2]</div>
<div class="face left">[doc4]</div>
<div class="face right">[doc5]</div>
<div class="face front">[doc3]</div>
<div class="face back">[doc6]</div>
</div>
</div>
[/log]
Potential Improvements:
Adding fallback for older browsers.
Making layout fluid rather than based on pixel lengths.
Make layout responsive.
Remove JavaScript from inline (?)
Edit: Fixed Non-support of Gecko, Presto, Trident and Tasman based browsers.
Edit 2: Fixed for weird bug in Firefox that prevents it from loading "javascript: ..." links in this context.