Add 3D rotation support?

[Dan503]

Awesome little plugin! This isn't a bug, more of a feature request.

Could 3D CSS element rotation be built into the plugin so elements can tilt based on the tilt of the device/mouse pointer location?

[cpouldev]

+1

[ngmerritt]

I've been trying to implement this functionality as well. I'd love to see it added as a feature.

[reneroth]

Working with rotation will open a whole can of worms that's not in the scope of this project, but I don't want to rule it out just yet. Maybe in future versions? Keeping this issue open for now

[gravyraveydavey]

In case it's helpful - you can still make some cool 3D esq effects without directly mapping the rotation to the mouse. Here's an example using increasing rotation by nth-child
http://codepen.io/gravyraveydavey/pen/NjNreG

[Splendorr]

@gravyraveydavey This was really helpful to me, thank you!

[reneroth]

@gravyraveydavey this looks really cool!

I'm still unsure what's the right approach for this. Of course I could try adding 3D rotation support with all its caveats and further configuration options, but this smells of feature creep. A different approach would be isolating the whole detection and input section of the code from the output (= 2D parallax transform). Then we could implement things like 3D rotation support as plugins.
But this would be a wholly different project.

[Dan503]

Making it work through a plugin structure sounds like an awesome idea!

People who don't need the rotation support can just leave it out then rather than forcing hundreds of killobites of extra code down people's thoughts that they don't need.

It would be a bit like GSAP structure. You have the core code, then you can add the position plugin for the current functionality, or add the rotation plugin for the rotation functionality. And then have a mega package that has both plugins by default to make it easier to use for people that aren't as fussed about file size.

[Smashr]

So, tilt.js does this already, however they do not support tilt based on device orientation, and the objects only interact with the mouse pointer.

https://gijsroge.github.io/tilt.js/

I requested device tilt/orientation/gyroscope support for tilt.js here :

gijsroge/tilt.js#28

So basically it would be awesome if parallax.js adds tilt support or tilt.js adds orientation support. I personally feel that adding an option to "rotate" in-addition to "translate" to parallax.js would be great.

[patr1ck]

For those interested, I added something similar to what's being discussed here in my PR: #243