Permalink
Browse files

adding files

  • Loading branch information...
1 parent 3cac7fe commit e5df8fe4b0ad6235ee6d71c09ed09ac98b1a69a2 @codepo8 committed Mar 6, 2012
Showing with 317 additions and 0 deletions.
  1. +134 −0 csscube.css
  2. +53 −0 csscube.js
  3. +53 −0 index.html
  4. +77 −0 styles.css
View
134 csscube.css
@@ -0,0 +1,134 @@
+.perspective .cubecontainer {
+ position: relative;
+ height: 300px;
+ width: 500px;
+ -webkit-perspective: 800px;
+ -moz-perspective: 800px;
+ -ms-perspective: 800px;
+ -o-perspective: 800px;
+ perspective: 800px;
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ -o-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+}
+.perspective .cube {
+ display: block;
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ top: 60px;
+ left:100px;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -webkit-transition: 1s;
+ -moz-transition: 1s;
+ -ms-transition: 1s;
+ -o-transition: 1s;
+ transition: 1s;
+}
+.perspective .cube.back {
+ -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+ -moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+ -ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+ -o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+ transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+}
+.perspective .cube.right {
+ -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+ -moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+ -ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+ -o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+ transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+}
+.perspective .cube.left {
+ -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
+ -moz-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
+ -ms-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
+ -o-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
+ transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
+}
+.perspective .cube.front {
+ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+}
+.perspective .cube.top {
+ -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+ -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+ -ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+ -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+ transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
+}
+.perspective .cube.bottom {
+ -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
+ -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
+ -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
+ -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
+ transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
+}
+
+.perspective .front, .perspective .back, .perspective .top,
+.perspective .left, .perspective .bottom, .perspective .right {
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ -webkit-backface-visibility: visible;
+ -moz-backface-visibility: visible;
+ -ms-backface-visibility: visible;
+ -o-backface-visibility: visible;
+ backface-visibility: visible;
+}
+.perspective .front {
+ -webkit-transform: translate3d(0 ,0, 100px);
+ -moz-transform: translate3d(0, 0, 100px);
+ -ms-transform: translate3d(0, 0, 100px);
+ -o-transform: translate3d(0, 0, 100px);
+ transform: translate3d(0, 0, 100px);
+}
+.perspective .back {
+ -webkit-transform: rotateY(180deg) translate3d(0, 0, 100px);
+ -moz-transform: rotateY(180deg) translate3d(0, 0, 100px);
+ -ms-transform: rotateY(180deg) translate3d(0, 0, 100px);
+ -o-transform: rotateY(180deg) translate3d(0, 0, 100px);
+ transform: rotateY(180deg) translate3d(0, 0, 100px);
+}
+.perspective .left {
+ -webkit-transform: rotateY(90deg) translate3d(0, 0, 100px);
+ -moz-transform: rotateY(90deg) translate3d(0, 0, 100px);
+ -ms-transform: rotateY(90deg) translate3d(0, 0, 100px);
+ -o-transform: rotateY(90deg) translate3d(0, 0, 100px);
+ transform: rotateY(90deg) translate3d(0, 0, 100px);
+}
+.perspective .right {
+ -webkit-transform: rotateY(-90deg) translate3d(0, 0, 100px);
+ -moz-transform: rotateY(-90deg) translate3d(0, 0, 100px);
+ -ms-transform: rotateY(-90deg) translate3d(0, 0, 100px);
+ -o-transform: rotateY(-90deg) translate3d(0, 0, 100px);
+ transform: rotateY(-90deg) translate3d(0, 0, 100px);
+}
+.perspective .top {
+ -webkit-transform: rotateX(90deg) translate3d(0, 0, 100px);
+ -moz-transform: rotateX(90deg) translate3d(0, 0, 100px);
+ -ms-transform: rotateX(90deg) translate3d(0, 0, 100px);
+ -o-transform: rotateX(90deg) translate3d(0, 0, 100px);
+ transform: rotateX(90deg) translate3d(0, 0, 100px);
+}
+.perspective .bottom {
+ -webkit-transform: rotateX(-90deg) translate3d(0, 0, 100px);
+ -moz-transform: rotateX(-90deg) translate3d(0, 0, 100px);
+ -ms-transform: rotateX(-90deg) translate3d(0, 0, 100px);
+ -o-transform: rotateX(-90deg) translate3d(0, 0, 100px);
+ transform: rotateX(-90deg) translate3d(0, 0, 100px);
+}
View
53 csscube.js
@@ -0,0 +1,53 @@
+/*
+ csscube by Christian Heilmann
+ Homepage: http://thewebrocks.com/demos/csscube
+ Copyright (c)2012 Christian Heilmann
+ Code licensed under the BSD License:
+ http://wait-till-i.com/license.txt
+*/
+(function(){
+var docelm = document.documentElement,
+ testprops = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective',
+ 'OPerspective', 'msPerspective'],
+ i = testprops.length,
+ canperspective = false,
+ cubes = document.querySelectorAll( '.cubecontainer' ),
+ sides = [ 'front', 'left', 'back', 'right', 'top', 'bottom' ],
+ nav = out = side = all = t = null;
+
+while( i-- ) {
+ if ( docelm.style[ testprops[ i ] ] !== undefined ) {
+ docelm.className += ' perspective';
+ canperspective = true;
+ break;
+ }
+}
+
+if( canperspective ) {
+ i = cubes.length;
+ while( i-- ) {
+ nav = document.createElement( 'nav' );
+ cubes[i].insertBefore( nav, cubes[i].firstChild );
+ all = sides.length;
+ out = '<ul>';
+ for ( j = 0; j < all; j++ ) {
+ side = cubes[i].querySelector( '.cube .' + sides[j] );
+ if( side ) {
+ out += '<li><button data-trigger="' + side.className + '">' +
+ side.getAttribute( 'data-label' ) +
+ '</button></li>';
+ }
+ }
+ out += '</ul>';
+ nav.innerHTML = out;
+ cubes[i].addEventListener( 'click', function(evt) {
+ t = evt.target;
+ if ( t.tagName === 'BUTTON' && t.getAttribute('data-trigger') ) {
+ t.parentNode.parentNode.parentNode.parentNode
+ .querySelector('.cube').className = 'cube '+
+ t.getAttribute('data-trigger');
+ }
+ }, false);
+ }
+}
+})();
View
53 index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta type="description" content="A rotating cube using 3D CSS transforms">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<title>CSS Cube Demo</title>
+<link rel="stylesheet" href="styles.css" type="text/css" charset="utf-8">
+<link rel="stylesheet" href="csscube.css" type="text/css" charset="utf-8">
+</head>
+<body>
+
+<div class="cubecontainer labeled">
+ <ul class="cube left">
+ <li class="front" data-label="Front">Front</li>
+ <li class="left" data-label="Left">Left</li>
+ <li class="back" data-label="Back">Back</li>
+ <li class="right" data-label="Right">Right</li>
+ <li class="bottom" data-label="Bottom">Bottom</li>
+ <li class="top" data-label="Top">Top</li>
+ </ul>
+</div>
+
+<div class="cubecontainer">
+ <ul class="cube">
+ <li class="front" data-label="Mittens">
+ <img src="http://placekitten.com/g/200/200" class="Mittens the cat">
+ </li>
+ <li class="left" data-label="Muffy">
+ <img src="http://placekitten.com/g/203/201" alt="Muffy the cat">
+ </li>
+ <li class="back" data-label="Azlan">
+ <img src="http://placekitten.com/g/199/199" alt="Azlan the cat">
+ </li>
+ <li class="right" data-label="Cleopatra">
+ <img src="http://placekitten.com/g/205/205" alt="Cleopatra the cat">
+ </li>
+ <li class="bottom" data-label="Elinor">
+ <img src="http://placekitten.com/g/202/202" alt="Elinor the cat">
+ </li>
+ <li class="top" data-label="Parcival">
+ <img src="http://placekitten.com/g/199/197" data-label="Ginger" alt="Parcival the cat">
+ </li>
+ </ul>
+</div>
+<footer><p>Written by
+ <a href="http://christianheilmann.com/">Chris Heilmann</a>
+ (<a href="http://twitter.com/codepo8">@codepo8</a>)
+</p></footer>
+
+<script src="csscube.js"></script>
+</body>
+</html>
View
77 styles.css
@@ -0,0 +1,77 @@
+*{
+ margin: 0;
+ padding: 0;
+ list-style:none;
+}
+html {
+ height: 100%;
+ background: #333;
+ background: -moz-linear-gradient(#333,#000);
+ background: -webkit-linear-gradient(#333,#000);
+ background: -ms-linear-gradient(#333,#000);
+ background: -o-linear-gradient(#333,#000);
+ background: linear-gradient(#333,#000);
+ font-family: 'MetaBold', sans-serif;
+}
+h1{
+ font-size: 24px;
+}
+nav a {
+ font-size: 30px;
+ text-decoration: none
+}
+a{ color: #369;}
+
+.perspective .cubecontainer nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.cube li {
+ float: left;
+ padding-right: 1em;
+}
+.cube {
+ overflow: auto;
+}
+.perspective .cube li {
+ float: none;
+ padding: 0;
+}
+.perspective .cube {
+ overflow: visible;
+}
+.perspective .cubecontainer nav li {
+ display: inline;
+}
+.cube img {
+ display: block;
+ width: 100px;
+ height: 100px;
+ padding: 10px;
+}
+
+.perspective .cube img {
+ display: block;
+ width: 200px;
+ height: 200px;
+ padding: 0;
+}
+button {
+ border: none;
+ background: transparent;
+ font-weight: bold;
+ color: lime;
+ font-size: 15px;
+ padding: 5px 10px;
+}
+.perspective .labeled .cube li{
+ background: rgba(50,200,0,0.8);
+ font-size:50px;
+ line-height: 200px;
+ text-align: center;
+ height: 200px;
+ width: 200px;
+ float:none;
+}
+footer{color:#ccc}

0 comments on commit e5df8fe

Please sign in to comment.