Collection of free jQuery 3D effect code examples from Codepen and GitHub.

Related Articles

  1. CSS 3D Examples

Author

  • Josh Allen

Links

Made with

  • HTML / CSS / JS

About a code

GitHub Globe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Author

  • Pete Barr

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Pulsing 3D Typography Thingy

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Krebsz Attila

Links

Made with

  • HTML / CSS / JS

About a code

jquery-plate

An easy to use jQuery plugin for adding nice 3D hover effect on any element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.plate.js

Author

  • Matthias

Links

Made with

  • HTML / CSS / JS

About a code

face-cursor.js

A little jQuery plugin to 3D transform elements relative to the cursor position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery-face-cursor.js

Author

  • Rian Ariona

Links

Made with

  • HTML / CSS / JS

About a code

jQuery Hover3D

Simple jQuery plugin for 3D hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.hover3d.js

Author

  • Hasin Hayder

Links

Made with

  • HTML / CSS / JS

About a code

3D Curtain

A 3D curtain style animation using animate.css and jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, 3d-curtain.js

Author

  • Joseph Martucci

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full Page 3D Effect Search

Click on the fixed position search icon to rotate the page content out and bring in the search box.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Pete R.

Links

Made with

  • HTML / CSS / JS

About a code

Tilted Page Scroll

Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.tiltedpage-scroll.js

Author

  • Justin Windle

Links

Made with

  • HTML / CSS / JS

About a code

Makisu

An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: makisu.js

Author

  • Justin Windle

Links

Made with

  • HTML / CSS / JS

About a code

FoldScroll

An experimental CSS 3D scroll behavior jQuery plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: foldscroll.js

Author

  • Indamix

Links

Made with

  • HTML / CSS / JS

About a code

Real Shadow

Module that casts photorealistic shadows of any shape.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.real-shadow.js