Info-I 310 Student Work: Code Cube (only works in chrome, firefox and safari)


                                    .face {color:#ffffff;overflow:hidden;position:absolute;
                                    width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;}
                                    100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% 
                                    {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s;
                                    -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;
                                    -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite;
                                    -webkit-animation-timing-function:linear;position:absolute;}.cube1
                                    {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px;
                                    background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px;
                                    left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px;
                                    left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
                                    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}


                                    .face {color:#ffffff;overflow:hidden;position:absolute;
                                    width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;}
                                    100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% 
                                    {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s;
                                    -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;
                                    -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite;
                                    -webkit-animation-timing-function:linear;position:absolute;}.cube1
                                    {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px;
                                    background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px;
                                    left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px;
                                    left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
                                    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}


                                    .face {color:#ffffff;overflow:hidden;position:absolute;
                                    width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;}
                                    100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% 
                                    {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s;
                                    -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;
                                    -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite;
                                    -webkit-animation-timing-function:linear;position:absolute;}.cube1
                                    {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px;
                                    background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px;
                                    left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg);
                                    -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px;
                                    left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
                                    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}

When I saw cool animations done using CSS3, I was amazed by how it worked. It looked like magic to me and like any magic trick, I wanted to reveal the secrets behind it. My goal is to create something so mystifying that it will have the viewer guessing how it works. I want to give the viewer the feeling of wanting to demystify something. Web designers and experts don't like revealing their magic tricks, so when I went to find out how this works, I was only finding bits and pieces of sample code. It was as if I was searching through a dark room with a flashlight and every now and then I could catch a glimpse of what I was looking for. The code cube reflects my experience of discovery. Written on the sides are samples of the code, but not all of it. The code cube was constructed using pure CSS3 with HTML div tags. That means no JavaScript was used to animate the cube.

1. Daniel Albas, Cheryl Albas, "Modern Magic: The Case of Examination", The Sociological Quarterly, Vol. 30, No. 4 (Winter, 1989), pp. 603-613

2. Richard P. Gabriel, Kevin J. Sullivan, "Better Science Through Art", Dream Songs. January 6, 2012. <http://dreamsongs.com/Files/BetterScienceThroughArt.pdf> (04/18/12): pp. 7-9

3. Adam Sheridan, "Demystifying HTML5 & CSS3," Specialmoves Labs. April 2, 2012. <http://specialmoves.com/labs/demystifying-html5-css3> (04/18/12)

Our Tools

Tuesday, April 24, 2012

Code Cube (only works in chrome, firefox and safari)

1 comment: