Jump to content

Personal Page Template: The White Cube (for Documents)


Recommended Posts

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 by The Warrior
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Forum Statistics

    16,150
    Total Topics
    176,386
    Total Posts
  • Recently Browsing

    No registered users viewing this page.

  • Upcoming Events

    No upcoming events found
  • Recent Event Reviews

×
×
  • Create New...