ad

Fancy Rotating CSS3 Cube With Cube.js

fancy

In previous posts, we have posted various CSS3 animations. Today, we are posting another cool CSS3 animation with a JS library. Cube.js is a light-weight jQuery plugin that lets you add rotating CSS3 cube to a web page.

Fancy Rotating CSS3 Cube With Cube.js

Just include cube.js script in the page and then add the following code.

HTML Code

<div id="the-cube" class="the-cube">
	<span class="side-1"></span>
	<span class="side-2"></span>
	<span class="side-3"></span>
	<span class="side-4"></span>
	<span class="side-5"></span>
	<span class="side-6"></span>
</div>

 JS code

<script>
var myCube = new Cube('#the-cube');

	myCube.rotate({
		speedX: 10000,
		speedY: 10000,
		speedZ: 10000,
		startSide: 'side-1'
});
</script>

And you are done.

You can also customize the cude by using available options.

Github: https://github.com/xhtmlized/cube
Homepage: http://xhtmlized.github.io/cube/

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker