CSS3 animated social cube mash-up

Several brilliant examples of CSS3 animations have caught my eye recently. There are some clever people out there producing cutting-edge examples rich with beautiful animations. I thought I’d mix a few ideas together to produce a 3D spinning globe using CSS3 and JQuery. The final result is here and a screen shot follows:

Cube spinning using  CSS3 technology

The cube  is built with six HTML div elements. These are the top and bottom, left and right, and front and back.  These are transformed into position using the 3D CSS transform property. Rotation is applied using the JQuery JavaScript library.  The HTML used to construct this page follows:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS cube</title>
		<link rel="stylesheet" type="text/css" href="cube.css" media="all" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script src='cube.js'></script>
	</head>
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="front">
					<img src='twitter.png' />
				</div>
				<div class="back">
					<img src='facebook.png' />
				</div>
				<div class="top"></div>
				<div class="bottom"></div>
				<div class="left">
					<img src='pinterest.jpg' />
				</div>
				<div class="right">
					<img src='youtube.png' />
				</div>
			</div>
		</div>
	</body>
</html>

In addition to the elements which represent the cube the other main parts are included within the head section. Specifically, these are the cascading style sheet and JavaScript includes. The first section of interest within the cascading style sheet relates to the cube:


.cube {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
}

For clarity the above does not include any vendor prefixes e.g. -webkit-??. The main property within the above snippet is the inclusion of ‘preserve-3d’. This instructs its child elements to preserve their 3D position. The child elements are the six sides of the cube which are positioned as follow:


.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}

.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}

.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}

.front {
    transform: translateZ(100px);
}

Let’s discuss how the six sides of the cube are positioned. Courtesy of the position absolute property each side of the cube starts its life in the same position:

6 sides of a cube stacked into a pile of 6 squares
6 sides of the cube without transform

The transform property allows us to rotate each side into place. The transform-origin property is used in conjunction with CSS rotate and transform, permitting control of the origin of a transform. To further understand this let us look at the left side which is rotated 270 degrees with its transform origin set to centre left. Capturing a screenshot of the transform at 30 degree intervals reveals the following:

Several images showing the CSS transform

The final CSS property is the translate property. This adjusts the X position.

Once the cube is rendered it starts to spin. The spinning effect is implemented using the JavaScript library JQuery, The code to do this follows:


$(function () {
    
    var lastClass = null,
        stepCount = 1;

    switchSpin();

    function switchSpin() {
        
        var secsClass = "sec" + stepCount;

        if (lastClass !== null && 
            $('.cube').hasClass(lastClass)) {
            $('.cube').removeClass(lastClass);
        }

        $('.cube').addClass(secsClass);

        lastClass = secsClass;

        if (++stepCount > 2) {
            stepCount = 1;
        }

        setTimeout(function () {
            switchSpin();
        }, 5000);

    }

});

The code above calls the ‘switchSpin’ function every 5 seconds – setTimeout call. The spinning effect is applied by adding a CSS class to the cube’s HTML element. These classes are called ‘sec1’ and ‘sec2’. They reference two CSS animations ‘spin’ and ‘spinr’ e.g.

.sec1 {
    animation: spin 5s infinite linear;
}

.sec2 {
    animation: spinr 5s infinite linear;
}

@keyframes spin {
    from { transform: rotateY(0); } to { transform: rotateY(360deg); }
}

@keyframes spinr {
    from { transform: rotateY(360deg); } to { transform: rotateY(0); }
}


The CSS animation above labelled ‘spin’ makes the cube spin clockwise. The second animation which the script applies performs the reverse, and thus, is labelled ‘spinr’. This spin once and reverse repeats.

That concludes one’s experiment with HTML5′s canvas. I hope this helps someone. All the code above may be taken and used for anything – credit not required. A working version of this project can be viewed here. Feedback welcome.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s