Skip to content

Instantly share code, notes, and snippets.

@lanche86

lanche86/index.html

Created June 13, 2013 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lanche86/5777010 to your computer and use it in GitHub Desktop.
Save lanche86/5777010 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Adam Storr. N64 Logo in CSS - I decided my first experiment with 3D in CSS would be recreating the classic N64 I'm so fond of.
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>N64 Logo</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div id="container">
<div id="logo" class="animate">
<div class="column one">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column two angle">
<div class="panel front green topLeft bottomRight"></div>
<div class="panel back green topRight bottomLeft"></div>
<div class="panel right blue"></div>
<div class="panel left red"></div>
</div>
<div class="column three">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column four angle">
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue topLeft bottomRight"></div>
<div class="panel left blue topLeft bottomRight"></div>
</div>
<div class="column five angle">
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue topRight bottomLeft"></div>
<div class="panel left blue topRight bottomLeft"></div>
</div>
<div class="column six">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column seven angle">
<div class="panel front green topRight bottomLeft"></div>
<div class="panel back green topLeft bottomRight"></div>
<div class="panel right red"></div>
<div class="panel left blue"></div>
</div>
<div class="column eight">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
</div>
<div id="reflection">
<div id="reflectedLogo" class="animateRef">
<div class="column one">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column two angle">
<div class="panel front green topLeft bottomRight"></div>
<div class="panel back green topRight bottomLeft"></div>
<div class="panel right blue"></div>
<div class="panel left red"></div>
</div>
<div class="column three">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column four angle">
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue topLeft bottomRight"></div>
<div class="panel left blue topLeft bottomRight"></div>
</div>
<div class="column five angle">
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue topRight bottomLeft"></div>
<div class="panel left blue topRight bottomLeft"></div>
</div>
<div class="column six">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
<div class="column seven angle">
<div class="panel front green topRight bottomLeft"></div>
<div class="panel back green topLeft bottomRight"></div>
<div class="panel right red"></div>
<div class="panel left blue"></div>
</div>
<div class="column eight">
<div class="panel top yellow"></div>
<div class="panel front green"></div>
<div class="panel back green"></div>
<div class="panel right blue"></div>
<div class="panel left blue"></div>
<div class="panel bottom yellow"></div>
</div>
</div>
</div>
</div>
<div id="background"><div class="glow"></div></div>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
}
@-moz-keyframes rotate {
from { -moz-transform: rotateX( 60deg ) rotateZ(45deg); }
to{ -moz-transform: rotateX( 60deg ) rotateZ(-315deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotateX( 60deg ) rotateZ(45deg); }
to{ -webkit-transform: rotateX( 60deg ) rotateZ(-315deg); }
}
@-o-keyframes rotate {
from { -o-transform: rotateX( 60deg ) rotateZ(45deg); }
to{ -o-transform: rotateX( 60deg ) rotateZ(-315deg); }
}
@keyframes rotate {
from { transform: rotateX( 60deg ) rotateZ(45deg); }
to{ transform: rotateX( 60deg ) rotateZ(-315deg); }
}
@-moz-keyframes rotateRef {
from { -moz-transform: rotateX( 60deg ) rotateZ(45deg) scaleY(-1); }
to{ -moz-transform: rotateX( 60deg ) rotateZ(-315deg) scaleY(-1); }
}
@-webkit-keyframes rotateRef {
from { -webkit-transform: rotateX( 60deg ) rotateZ(45deg) scaleY(-1); }
to{ -webkit-transform: rotateX( 60deg ) rotateZ(-315deg) scaleY(-1); }
}
@-o-keyframes rotateRef {
from { -o-transform: rotateX( 60deg ) rotateZ(45deg) scaleY(-1); }
to{ -o-transform: rotateX( 60deg ) rotateZ(-315deg) scaleY(-1); }
}
@keyframes rotateRef {
from { transform: rotateX( 60deg ) rotateZ(45deg) scaleY(-1); }
to{ transform: rotateX( 60deg ) rotateZ(-315deg) scaleY(-1); }
}
body {
background: #f0f0f0;
}
#container {
width: 436px;
height: 900px;
position: absolute;
top: 50%;
left: 0; right: 0;
margin: -400px auto;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-o-perspective: 1500px;
perspective: 1500px;
-webkit-backface-visibility: hidden;
-webkit-transform: scale( 0.3 );
-moz-transform: scale( 0.3 );
-o-transform: scale( 0.3 );
transform: scale( 0.3 );
}
#logo {
width: 100%;
height: 436px;
position: absolute;
z-index: 2;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateX( 60deg ) rotateZ( 45deg );
-moz-transform: rotateX( 60deg ) rotateZ( 45deg );
-o-transform: rotateX( 60deg ) rotateZ( 45deg );
transform: rotateX( 60deg ) rotateZ( 45deg );
-webkit-transition : -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition : -o-transform 2s linear;
-ms-transition : -ms-transform 2s linear;
transition : transform 2s linear;
}
#reflection {
opacity: 0.05;
}
#reflectedLogo {
width: 100%;
top: 500px;
height: 450px;
position: absolute;
z-index: -1;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX( 60deg ) rotateZ( 45deg ) scaleY(-1);
-moz-transform: rotateX( 60deg ) rotateZ( 45deg ) scaleY(-1);
-o-transform: rotateX( 60deg ) rotateZ( 45deg ) scaleY(-1);
transform: rotateX( 60deg ) rotateZ( 45deg ) scaleY(-1);
-webkit-transition : -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition : -o-transform 2s linear;
-ms-transition : -ms-transform 2s linear;
transition : transform 2s linear;
}
.overlay {
color: white;
opacity: 0.8;
position: absolute;
width: 100%;
height: 400px;
bottom: 0;
z-index: 3;
}
.animate {
-webkit-animation : rotate 11s infinite linear;
-moz-animation : rotate 11s infinite linear;
-o-animation : rotate 11s infinite linear;
-ms-animation : rotate 11s infinite linear;
animation : rotate 11s infinite linear;
}
.animateRef {
-webkit-animation : rotateRef 11s infinite linear;
-moz-animation : rotateRef 11s infinite linear;
-o-animation : rotateRef 11s infinite linear;
-ms-animation : rotateRef 11s infinite linear;
animation : rotateRef 11s infinite linear;
}
.column {
width: 100px;
height: 100px;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.column.one {
top: 0;
left: 0;
}
.column.two {
top: 0;
left: 50%;
margin: 0 0 0 -50px;
-webkit-transform: rotateY( 42.5deg ) translate3d(-6px,0px,14px);
-moz-transform: rotateY( 42.5deg ) translate3d(-6px,0px,14px);
-o-transform: rotateY( 42.5deg ) translate3d(-6px,0px,14px);
transform: rotateY( 42.5deg ) translate3d(-6px,0px,14px);
}
.column.three {
top: 0;
right: 0;
}
.column.four {
top: 50%;
left: 0;
margin: -50px 0 0 0;
-webkit-transform: rotateX( -47.5deg ) translate3d(0,-6px,15px);
-moz-transform: rotateX( -47.5deg ) translate3d(0,-6px,15px);
-o-transform: rotateX( -47.5deg ) translate3d(0,-6px,15px);
transform: rotateX( -47.5deg ) translate3d(0,-6px,15px);
}
.column.five {
top: 50%;
right: 0;
margin: -50px 0 0 0;
-webkit-transform: rotateX( 47.5deg ) translate3d(0px,-7px,-15px);
-moz-transform: rotateX( 47.5deg ) translate3d(0px,-7px,-15px);
-o-transform: rotateX( 47.5deg ) translate3d(0px,-7px,-15px);
transform: rotateX( 47.5deg ) translate3d(0px,-7px,-15px);
}
.column.six {
bottom: 0;
left: 0;
}
.column.seven {
left: 50%;
bottom: 0;
margin: 0 0 0 -50px;
-webkit-transform: rotateY( -42.5deg ) translate3d(-5px,0px,-13px);
-moz-transform: rotateY( -42.5deg ) translate3d(-5px,0px,-13px);
-o-transform: rotateY( -42.5deg ) translate3d(-5px,0px,-13px);
transform: rotateY( -42.5deg ) translate3d(-5px,0px,-13px);
}
.column.eight {
bottom: 0;
right: 0;
}
.column div.panel {
width: 140px;
height: 140px;
display: block;
position: absolute;
margin: 0px;
}
.column div.panel.top,
.column div.panel.bottom {
height: 140px;
}
.column div.panel.topLeft:before {
width: 0;
height: 0;
content: " ";
bottom: 100%;
position: absolute;;
border-bottom: 152px solid red;
border-right: 140px solid transparent;
}
.column div.panel.topRight:before {
width: 0;
height: 0;
content: " ";
bottom: 100%;
position: absolute;;
border-bottom: 152px solid red;
border-left: 140px solid transparent;
}
.column div.panel.bottomLeft:after {
width: 0;
height: 0;
content: " ";
top: 100%;
position: absolute;;
border-top: 152px solid red;
border-right: 140px solid transparent;
}
.column div.panel.bottomRight:after {
width: 0;
height: 0;
content: " ";
top: 100%;
position: absolute;;
border-top: 152px solid red;
border-left: 140px solid transparent;
}
/* Applying a unique color to each face */
.column div.panel.green { background: rgba( 0, 144, 43, 1 ); }
.column div.panel.blue { background: rgba( 0, 47, 171, 1 ); }
.column div.panel.yellow { background: rgba( 255, 189, 0, 1 ); }
.column div.panel.red { background: rgba( 255, 42, 0, 1 ); }
.column div.panel.green:before,
.column div.panel.green:after {
border-top-color: rgb( 0, 144, 43 );
border-bottom-color: rgb( 0, 144, 43 );
}
.column div.panel.blue:before,
.column div.panel.blue:after {
border-top-color: rgba( 0, 47, 171, 1 );
border-bottom-color: rgba( 0, 47, 171, 1 );
}
/* Giving the desired orientation to each side of the cube */
.column div.panel.top {
-webkit-transform: rotateX( 0deg ) translate3d( 0, 0, 210px );
-moz-transform: rotateX( 0deg ) translate3d( 0, 0, 210px );
-o-transform: rotateX( 0deg ) translate3d( 0, 0, 210px );
transform: rotateX( 0deg ) translate3d( 0, 0, 210px );
}
.column div.panel.front {
-webkit-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleY(3);
-moz-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-o-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
}
.column.angle div.panel.front {
-webkit-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleY(1);
-moz-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleY(1);
-o-transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleY(1);
transform: rotateX( -90deg ) translate3d( 0, 0, 70px ) scaleY(1);
}
.column.four.angle div.panel.front {
-webkit-transform: rotateX( 0deg ) translate3d( 0px, -76px, 70px ) scaleY(2.1);
-moz-transform: rotateX( 0deg ) translate3d( 0px, -76px, 70px ) scaleY(2.1);
-o-transform: rotateX( 0deg ) translate3d( 0px, -76px, 70px ) scaleY(2.1);
transform: rotateX( 0deg ) translate3d( 0px, -76px, 70px ) scaleY(2.1);
}
.column.five.angle div.panel.front {
-webkit-transform: rotateX( 0deg ) translate3d( 0px, 76px, 70px ) scaleY(2.1);
-moz-transform: rotateX( 0deg ) translate3d( 0px, 76px, 70px ) scaleY(2.1);
-o-transform: rotateX( 0deg ) translate3d( 0px, 76px, 70px ) scaleY(2.1);
transform: rotateX( 0deg ) translate3d( 0px, 76px, 70px ) scaleY(2.1);
}
.column div.panel.back {
-webkit-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleY(3);
-moz-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-o-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
}
.column.angle div.panel.back {
-webkit-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleY(1);
-moz-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleY(1);
-o-transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleY(1);
transform: rotateX( 90deg ) translate3d( 0, 0, 70px ) scaleY(1);
}
.column.four.angle div.panel.back {
-webkit-transform: rotateX( 180deg ) translate3d( 0px, -74px, 70px ) scaleY(2.1);
-moz-transform: rotateX( 180deg ) translate3d( 0px, -74px, 70px ) scaleY(2.1);
-o-transform: rotateX( 180deg ) translate3d( 0px, -74px, 70px ) scaleY(2.1);
transform: rotateX( 180deg ) translate3d( 0px, -74px, 70px ) scaleY(2.1);
}
.column.five.angle div.panel.back {
-webkit-transform: rotateX( 180deg ) translate3d( 0px, 74px, 70px ) scaleY(2.1);
-moz-transform: rotateX( 180deg ) translate3d( 0px, 74px, 70px ) scaleY(2.1);
-o-transform: rotateX( 180deg ) translate3d( 0px, 74px, 70px ) scaleY(2.1);
transform: rotateX( 180deg ) translate3d( 0px, 74px, 70px ) scaleY(2.1);
}
.column div.panel.right {
-webkit-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-moz-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-o-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(3);
}
.column.angle div.panel.right.red {
-webkit-transform: rotateY( 90deg ) translate3d( -77px, 0, 70px ) scaleX(2.05);
-moz-transform: rotateY( 90deg ) translate3d( -77px, 0, 70px ) scaleX(2.05);
-o-transform: rotateY( 90deg ) translate3d( -77px, 0, 70px ) scaleX(2.05);
transform: rotateY( 90deg ) translate3d( -77px, 0, 70px ) scaleX(2.05);
}
.column.angle div.panel.left.red {
-webkit-transform: rotateY( 90deg ) translate3d( -77px, 0, -70px ) scaleX(2.05);
-moz-transform: rotateY( 90deg ) translate3d( -77px, 0, -70px ) scaleX(2.05);
-o-transform: rotateY( 90deg ) translate3d( -77px, 0, -70px ) scaleX(2.05);
transform: rotateY( 90deg ) translate3d( -77px, 0, -70px ) scaleX(2.05);
}
.column.angle div.panel.right.blue {
-webkit-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(1);
-moz-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(1);
-o-transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(1);
transform: rotateY( 90deg ) translate3d( 0, 0, 70px ) scaleX(1);
}
.column.two.angle div.panel.right.blue {
-webkit-transform: rotateY( 90deg ) translate3d( 74px, 0, 70px ) scaleX(2.1);
-moz-transform: rotateY( 90deg ) translate3d( 74px, 0, 70px ) scaleX(2.1);
-o-transform: rotateY( 90deg ) translate3d( 74px, 0, 70px ) scaleX(2.1);
transform: rotateY( 90deg ) translate3d( 74px, 0, 70px ) scaleX(2.1);
}
.column.angle div.panel.left.blue {
-webkit-transform: rotateY( 90deg ) translate3d( 0, 0, -70px ) scaleX(1);
-moz-transform: rotateY( 90deg ) translate3d( 0, 0, -70px ) scaleX(1);
-o-transform: rotateY( 90deg ) translate3d( 0, 0, -70px ) scaleX(1);
transform: rotateY( 90deg ) translate3d( 0, 0, -70px ) scaleX(1);
}
.column.seven.angle div.panel.left.blue {
-webkit-transform: rotateY( 90deg ) translate3d( 74px, 0, -70px ) scaleX(2.1);
-moz-transform: rotateY( 90deg ) translate3d( 74px, 0, -70px ) scaleX(2.1);
-o-transform: rotateY( 90deg ) translate3d( 74px, 0, -70px ) scaleX(2.1);
transform: rotateY( 90deg ) translate3d( 74px, 0, -70px ) scaleX(2.1);
}
.column div.panel.left {
-webkit-transform: rotateY( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-moz-transform: rotateY( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
-o-transform: rotateY( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
transform: rotateY( -90deg ) translate3d( 0, 0, 70px ) scaleX(3);
}
.column.angle div.panel.left {
-webkit-transform: rotateY( -90deg ) translate3d( -75px, 0, 70px ) scaleX(2);
-moz-transform: rotateY( -90deg ) translate3d( -75px, 0, 70px ) scaleX(2);
-o-transform: rotateY( -90deg ) translate3d( -75px, 0, 70px ) scaleX(2);
transform: rotateY( -90deg ) translate3d( -75px, 0, 70px ) scaleX(2);
}
.column div.panel.bottom {
-webkit-transform: rotateX( -180deg ) translate3d( 0, 0, 210px );
-moz-transform: rotateX( -180deg ) translate3d( 0, 0, 210px );
-o-transform: rotateX( -180deg ) translate3d( 0, 0, 210px );
transform: rotateX( -180deg ) translate3d( 0, 0, 210px );
}
#background {
height: 500px;
width: 500px;
background: #ffffff;
border-radius: 250px;
position: absolute;
top: 50%;
margin: -250px auto 0;
left: 0; right: 0;
z-index: -1;
opacity: 0.5;
-webkit-filter: blur(50px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment