Personal Page Template: The White Cube (for Documents)

June 18, 201313 yr

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, 201313 yr by The Warrior

Quote

Peace
1

Report

June 19, 201313 yr

(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!)

Quote

Report

June 19, 201313 yr

Root Admin

wwould be nice to see some sort of preview implementation

Quote

Report

June 20, 201313 yr

Author

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:

Quote

Report

June 20, 201313 yr

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

Quote

Report

June 20, 201313 yr

Author

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.

Quote

Report

June 20, 201313 yr

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

Quote

Report

Personal Page Template: The White Cube (for Documents)

Featured Replies

Join the conversation

Forum Statistics

Recently Browsing 0

Upcoming Events

Recent Event Reviews

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)