Personal Page Template: The White Cube (for Documents)

The Warrior · June 18, 2013

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.

Edited June 20, 2013 by The Warrior

Maebius · June 19, 2013

(this looks really awesome, but might need to upgrade my browser, since the links to switch faces are being wonky on my end. I see what it's trying to do though!)

Muratus del Mur · June 19, 2013

wwould be nice to see some sort of preview implementation

The Warrior · June 20, 2013

Until, I create another a working preview can be seen on my personal page http://magicduel.com/players/The_Warrior

Otherwise, screenshot will have to be sufficient:

Grido · June 20, 2013

I don't see the cube(I figure?) on your profile, I just see the marbles quest has ended and the doc buttons at the top. I'm on Firefox.

The idea is pretty cool though

The Warrior · June 20, 2013

That is some weird bug in Firefox, it works now for me. Live Demo updated and above code updated.

Providing your browser is one that supports CSS3 3D Transforms [Firefox 10+, Chrome 12+, Safari 4+, Opera 15+] it should work.

Grido · June 20, 2013

now working for me as well, before the js was just copying across into my url and sending me "there"

Sign In

Personal Page Template: The White Cube (for Documents)

Recommended Posts

The Warrior

Maebius

Muratus del Mur

The Warrior

Grido

The Warrior

Grido

Join the conversation

Forum Statistics

Recently Browsing

Upcoming Events

Recent Event Reviews

Browse

Activity