Jump to content
Sign in to follow this  
The Warrior

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


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...
Sign in to follow this  

  • Forum Statistics

    15,832
    Total Topics
    173,490
    Total Posts
  • Recently Browsing

    No registered users viewing this page.

  • Upcoming Events

    No upcoming events found
  • Recent Event Reviews

×
×
  • Create New...