Permalink
Browse files

3D cube for the logo, ala http://desandro.github.com/3dtransforms/doc…

  • Loading branch information...
akmurray committed Sep 25, 2012
1 parent dae96f0 commit 721fc83fad549ba5b27174b7743496fb7e66685d
View
@@ -0,0 +1,120 @@
img.logo {
border:0px solid #000;
}
#wrapper-logo {
width: 128px;
height: 128px;
position: relative;
margin-top:20px;
margin-left:40px;
border: 0px solid #CCC;
-webkit-perspective: 640px;
-moz-perspective: 640px;
-o-perspective: 640px;
perspective: 640px;
}
#logo-cube {
width: 128px;
height: 128px;
position: absolute;
margin:0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#logo-cube figure {
display: block;
position: absolute;
width: 128px;
height: 128px;
border: 0px solid black;
}
#logo-cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#logo-cube .side-1 {
-webkit-transform: translateZ( 64px );
-moz-transform: translateZ( 64px );
-o-transform: translateZ( 64px );
transform: translateZ( 64px );
}
#logo-cube .side-2 {
-webkit-transform: rotateX( -180deg ) translateZ( 64px );
-moz-transform: rotateX( -180deg ) translateZ( 64px );
-o-transform: rotateX( -180deg ) translateZ( 64px );
transform: rotateX( -180deg ) translateZ( 64px );
}
#logo-cube .side-3 {
-webkit-transform: rotateY( 90deg ) translateZ( 64px );
-moz-transform: rotateY( 90deg ) translateZ( 64px );
-o-transform: rotateY( 90deg ) translateZ( 64px );
transform: rotateY( 90deg ) translateZ( 64px );
}
#logo-cube .side-4 {
-webkit-transform: rotateY( -90deg ) translateZ( 64px );
-moz-transform: rotateY( -90deg ) translateZ( 64px );
-o-transform: rotateY( -90deg ) translateZ( 64px );
transform: rotateY( -90deg ) translateZ( 64px );
}
#logo-cube .side-5 {
-webkit-transform: rotateX( 90deg ) translateZ( 64px );
-moz-transform: rotateX( 90deg ) translateZ( 64px );
-o-transform: rotateX( 90deg ) translateZ( 64px );
transform: rotateX( 90deg ) translateZ( 64px );
}
#logo-cube .side-6 {
-webkit-transform: rotateX( -90deg ) translateZ( 64px );
-moz-transform: rotateX( -90deg ) translateZ( 64px );
-o-transform: rotateX( -90deg ) translateZ( 64px );
transform: rotateX( -90deg ) translateZ( 64px );
}
#logo-cube.show-side-1 {
-webkit-transform: translateZ( -64px );
-moz-transform: translateZ( -64px );
-o-transform: translateZ( -64px );
transform: translateZ( -64px );
}
#logo-cube.show-side-2 {
-webkit-transform: translateZ( -64px ) rotateX( -180deg );
-moz-transform: translateZ( -64px ) rotateX( -180deg );
-o-transform: translateZ( -64px ) rotateX( -180deg );
transform: translateZ( -64px ) rotateX( -180deg );
}
#logo-cube.show-side-3 {
-webkit-transform: translateZ( -64px ) rotateY( -90deg );
-moz-transform: translateZ( -64px ) rotateY( -90deg );
-o-transform: translateZ( -64px ) rotateY( -90deg );
transform: translateZ( -64px ) rotateY( -90deg );
}
#logo-cube.show-side-4 {
-webkit-transform: translateZ( -64px ) rotateY( 90deg );
-moz-transform: translateZ( -64px ) rotateY( 90deg );
-o-transform: translateZ( -64px ) rotateY( 90deg );
transform: translateZ( -64px ) rotateY( 90deg );
}
#logo-cube.show-side-5 {
-webkit-transform: translateZ( -64px ) rotateX( -90deg );
-moz-transform: translateZ( -64px ) rotateX( -90deg );
-o-transform: translateZ( -64px ) rotateX( -90deg );
transform: translateZ( -64px ) rotateX( -90deg );
}
#logo-cube.show-side-6 {
-webkit-transform: translateZ( -64px ) rotateX( 90deg );
-moz-transform: translateZ( -64px ) rotateX( 90deg );
-o-transform: translateZ( -64px ) rotateX( 90deg );
transform: translateZ( -64px ) rotateX( 90deg );
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -10,6 +10,8 @@
<meta name='viewport' content='width=device-width'>
<link rel='icon' href='favicon.png' type='image/png'>
<link rel='stylesheet' href='css/blog.css'>
<link rel='stylesheet' href='css/blog-logo.css'>
<script type="text/javascript" src="js/prototype-extensions.js"></script>
</head>
<body>
@@ -888,7 +890,14 @@ <h3>Getting An Influential Link</h3>
<div id='wrapper-sidebar'>
<div id='wrapper-logo'>
<img src='img/blog/logo/logo-1.png' class='logo' alt='site logo'>
<div id='logo-cube' class='show-side-1'>
<figure class='side-2'><img src='img/blog/logo/logo-2-128.png' class='logo' alt='site logo'></figure>
<figure class='side-3'><img src='img/blog/logo/logo-3-128.png' class='logo' alt='site logo'></figure>
<figure class='side-4'><img src='img/blog/logo/logo-4-128.png' class='logo' alt='site logo'></figure>
<figure class='side-5'><img src='img/blog/logo/logo-5-128.png' class='logo' alt='site logo'></figure>
<figure class='side-6'><img src='img/blog/logo/logo-6-128.png' class='logo' alt='site logo'></figure>
<figure class='side-1'><img src='img/blog/logo/logo-1-128.png' class='logo' alt='site logo'></figure>
</div>
</div>
<div id='wrapper-blog-post-menu'>
@@ -930,6 +939,31 @@ <h3>Getting An Influential Link</h3>
</div>
<script>
var init = function() {
//rotate the logo cube...
var logoRotate = function() {
var cube = document.getElementById('wrapper-logo').children[0];
for (var i=1;i<=6;i++)
cube.removeClassName('show-side-' + i);
var num = Math.ceil(Math.random()*6);
cube.addClassName('show-side-' + num);
};
//...every few seconds
var intervalLogo = self.setInterval(logoRotate,3000);
};
window.addEventListener( 'DOMContentLoaded', init, false);
</script>
<!-- Quantcast Tag -->
<script type='text/javascript'>
var _qevents = _qevents || [];
View
@@ -0,0 +1,45 @@
(function () {
/*!
Prototype extensions to base objects.
Methods that should exist by default, with checks in case they actually do.
Aaron K. Murray, akmurray@gmail.com, @aaronkmurray, www.aaronkmurray.com
*/
})();
if (!Element.prototype.hasClassName) Element.prototype.hasClassName = function (c) {
///<summary>Check to see if an element has a given css class name</summary>
///<returns>boolean. true/false</returns>
return new RegExp('(?:^|\\s+)' + c + '(?:\\s+|$)').test(this.className);
};
if (!Element.prototype.addClassName) Element.prototype.addClassName = function (c) {
///<summary>Add a css class name to an element</summary>
///<returns>boolean. true/false if the element had the css class before calling this method</returns>
if (!this.hasClassName(c)) {
this.className = [this.className, c].join(' ');
return true;
}
return false;
};
if (!Element.prototype.removeClassName) Element.prototype.removeClassName = function (c) {
///<summary>Remove a css class name from an element</summary>
///<returns>boolean. true/false if the class name was found and removed</returns>
if (this.hasClassName(c)) {
var a = this.className;
this.className = a.replace(new RegExp('(?:^|\\s+)' + c + '(?:\\s+|$)', 'g'), ' ');
return true;
}
return false;
};
if (!Element.prototype.toggleClassName) Element.prototype.toggleClassName = function (c) {
///<summary>Add a given css class name if it does not exist on the element. Remove the class if the class exists on the element.</summary>
///<returns>undefined</returns>
this[this.hasClassName(c) ? 'removeClassName' : 'addClassName'](c);
};

0 comments on commit 721fc83

Please sign in to comment.