# 3D Rotating cubes hover effect

DevFeed: [3D Rotating cubes hover effect](<https://devfeed.tech/articles/3d-rotating-cubes-hover-effect-37232.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/3d-rotating-cube-effect/>)

Author: Stanko

Published: 2016-02-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [jQuery](<https://devfeed.tech/topics/jquery.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [browser](<https://devfeed.tech/tags/browser.md>), [demo](<https://devfeed.tech/tags/demo.md>), [devices](<https://devfeed.tech/tags/devices.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [responsive](<https://devfeed.tech/tags/responsive.md>)

## AI overview

A tutorial demonstrating a responsive 3D cube hover effect built with jQuery. The cube switches between two sides on hover, changes rotation direction based on cursor entry, and adapts interaction direction for touch devices. Internet Explorer falls back to a fade effect because it does not support the required transform-style property.

## Source excerpt

Again, I've seen it somewhere on the internet and recreated it. This one uses jQuery, although I plan to rewrite it to vanilla JavaScript. It switches between two sides of the cube, every time you hover. Depending from which side cursor entered the cube, it will rotate in opposite direction. It is fully responsive, and on touch devices, direction depends of where you tap. Cube side is a regular div, and you can put any type of content in it. Works on every modern browser, but on IE it falls back to the fade effect. Thing is that Internet Explorers do not support transform-style: preserve-3d property. More on MDN. Check the demo. Documentation is on the same page. Grab the code on GitHub. Warning: Every person introduced to these cubes, played with them for ages :)