20个jQuery的3D特效插件

太过爱你忘了你带给我的痛 2022-06-12 05:53 352阅读 0赞

![94_110311110035_1.png][]

3D是个可愉悦每个人的好东西，jQuery可以帮助添加令人惊艳的3D效果。从图表到菜单、按钮，3D将用户体验提高到一个新的高度。jQuery 3D效果的综合列表，为我们展示了jQuery的创造性应用带给我们惊人的效果。以下列出的20个效果案例，附带站点、演示和下载。

**以下是相册切换3D效果：**

**[1. jQuery 3D Theatre Carousel][]**

![94_110311135953_1.jpg][]

jQuery 3D Theatre Carousel [ Web Site][Web Site]

jQuery 3D Theatre Carousel [ Demo][Web Site]

jQuery 3D Theatre Carousel[ Download][Download]

**[2. 3D Gallery View jQuery Plugin][]**

![http://wisdomplug.com/jquery/wp-content/uploads/wpid-3D-Gallery-View-jQuery-Plugin.png][http_wisdomplug.com_jquery_wp-content_uploads_wpid-3D-Gallery-View-jQuery-Plugin.png]

[Web Site][Web Site 1]

[Demo][]

[Download][Download 1]

**[3. Cloud Carousel – A 3d Carousel in Javascript][3. Cloud Carousel _ A 3d Carousel in Javascript]**

![http://wisdomplug.com/jquery/wp-content/uploads/wpid-Cloud-Carousel-A-3d-Carousel-in-Javascript.png][http_wisdomplug.com_jquery_wp-content_uploads_wpid-Cloud-Carousel-A-3d-Carousel-in-Javascript.png]

[Web Site][Web Site 2]

[ Demo][Web Site 2]

[Download][Download 2]

**[4. Roundabout for jQuery][]**

![http://wisdomplug.com/jquery/wp-content/uploads/wpid-Roundabout-for-jQuery.png][http_wisdomplug.com_jquery_wp-content_uploads_wpid-Roundabout-for-jQuery.png]

[ Web Site][Web Site 3]

[ Demo][Demo 1]

[ Download][Download 3]

**[5. Roundabout Shapes for jQuery][]**

![http://wisdomplug.com/jquery/wp-content/uploads/wpid-Roundabout-Shapes-for-jQuery.png][http_wisdomplug.com_jquery_wp-content_uploads_wpid-Roundabout-Shapes-for-jQuery.png]

[ Web Site][Web Site 4]

[ Demo][Demo 2]

[Download][Download 4]

[6. jQuery Waterwheel Carousel][]

![105T45X4-18.png][]

[Web Site][Web Site 5]

[ Demo][Web Site 5]

[Download][Download 5]

[7. jQuery k3dCarousel plugin][]

![94_110311141239_1.jpg][]

[ Web Site][Web Site 6]

[ Demo][Demo 3]

[Download][Download 6]

**[8. jQuery Feature Carousel][]**

![105T41960-26.png][]

[Web Site][Web Site 7]

[ Demo][Web Site 7]

[Download][Download 7]

**3D卡通效果：**

**[9. jQuery CSS3 3D Animation][]**

![94_110311141541_1.jpg][]

[Web Site][Web Site 8]

[Demo][Demo 4]

[Download][Download 8]

**[10. jQuery 3D ObjectVR][]**

![105T4F59-34.png][]

[ Web Site][Web Site 9]

[Demo][Demo 5]

[Download][Download 9]

**[11. jQuery 3D Levitation Effect][]**

![105T433J-38.png][]

[ Web Site][Web Site 10]

[ Demo][Web Site 10]

[Download][Download 10]

**[12. jQuery Smart3D][]**

![105T45945-42.png][]

[Web Site][Web Site 11]

[Demo][Demo 6]

[Download][Download 11]

**[13. 3D Sphere Using jQuery][]**

![1111251230-43.png][]

[ Web Site][Web Site 12]

[ Demo][Demo 7]

[Download][Download 12]

**[14. jQuery SSCarousel][]**

![105T43T3-50.png][]

[Web Site][Web Site 13]

[Demo][Web Site 13]

[Download][Download 13]

**以下是文本3D效果：**

**[15. jQuery Three Dee][]**

![94_110311112342_1.jpg][]

[ Web Site][Web Site 14]

[ Demo][Demo 8]

[Download][Web Site 14]

**[16. TextDepth: 3D-text jQuery Plugin][16. TextDepth_ 3D-text jQuery Plugin]**

**![111125DU-55.png][]**

[ Web Site][Web Site 15]

[Demo][Web Site 15]

[Download][Download 14]

**[17. jQuery 3D Label Effects][]**

![94_110311141424_1.jpg][]

[Web Site][Web Site 16]

[Demo][Web Site 16]

[Download][Web Site 16]

**以下是标签3D效果：**

**[18. 3d tag cloud][]**

![105T44454-66.png][]

[ Web Site][Web Site 17]

[ Demo][Web Site 17]

[Download][Download 15]

**[19. jQuery TagCanvas][]**

![105T41441-70.png][]

[Web Site][Web Site 18]

[Demo][Demo 9]

[Download][Download 16]

**[20. Tagosphere jQuery 3D Tag Cloud][]**

![111125OO-71.png][]

[Web Site][Web Site 19]

[Demo][Demo 10]

[Download][Download 17]

原文链接：[http://www.oschina.net/news/16202/20-smashing-3d-effects-using-jquery][http_www.oschina.net_news_16202_20-smashing-3d-effects-using-jquery]

[94_110311110035_1.png]: /images/20220612/8376b19723284c5b93f061118734e04d.png
[1. jQuery 3D Theatre Carousel]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-3d-theatre-carousel/
[94_110311135953_1.jpg]: /images/20220612/2a22f71ebd324bc98f6d66bb9eab40cc.png
[Web Site]: http://www.webdevelopers.eu/jquery/theatre
[Download]: http://www.webdevelopers.eu/jquery/theatre/download
[2. 3D Gallery View jQuery Plugin]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/3d-gallery-view-jquery-plugin/
[http_wisdomplug.com_jquery_wp-content_uploads_wpid-3D-Gallery-View-jQuery-Plugin.png]: /images/20220612/4e3b1470ce8d47d9a832750aad35fb08.png
[Web Site 1]: http://ajoin.it/3d-gallery-view-v-1-1-jquery-plugin/
[Demo]: http://ajoin.it/mipage/3dGalleyView/1.x/1.1/
[Download 1]: http://ajoin.it/mipage/3dGalleyView/1.x/1.1/3dGalleyView%201.1.rar
[3. Cloud Carousel _ A 3d Carousel in Javascript]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/cloud-carousel-a-3d-carousel-in-javascript/
[http_wisdomplug.com_jquery_wp-content_uploads_wpid-Cloud-Carousel-A-3d-Carousel-in-Javascript.png]: /images/20220612/202ba0d9e65c4a2eb7cbeeecaf8fa293.png
[Web Site 2]: http://www.professorcloud.com/mainsite/carousel.htm
[Download 2]: http://www.professorcloud.com/downloads/cloud-carousel.1.0.4.zip
[4. Roundabout for jQuery]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/roundabout-for-jquery/
[http_wisdomplug.com_jquery_wp-content_uploads_wpid-Roundabout-for-jQuery.png]: /images/20220612/565f8fd2e1d14878ba7ba2b1a919a854.png
[Web Site 3]: http://fredhq.com/projects/roundabout/
[Demo 1]: http://fredhq.com/projects/roundabout/#demo
[Download 3]: http://fredhq.com/assets/projects/roundabout/jquery.roundabout.js
[5. Roundabout Shapes for jQuery]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/roundabout-shapes-for-jquery/
[http_wisdomplug.com_jquery_wp-content_uploads_wpid-Roundabout-Shapes-for-jQuery.png]: /images/20220612/5b6aefedaf86470da6f4193c0e02cb02.png
[Web Site 4]: http://fredhq.com/projects/roundabout-shapes/
[Demo 2]: http://fredhq.com/projects/roundabout-shapes
[Download 4]: http://fredhq.com/assets/projects/roundabout-shapes/jquery.roundabout-shapes.js
[6. jQuery Waterwheel Carousel]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-waterwheel-carousel/
[105T45X4-18.png]: /images/20220612/dff3c13ecbbd4d57b52865643a8cc7ad.png
[Web Site 5]: http://www.bkosborne.com/jquery-waterwheel-carousel
[Download 5]: https://github.com/bkosborne/jQuery-Waterwheel-Carousel
[7. jQuery k3dCarousel plugin]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-k3dcarousel-plugin/
[94_110311141239_1.jpg]: /images/20220612/9f3e68b382e748d8a9c4a16f720de9d3.png
[Web Site 6]: http://verens.com/2010/10/07/jquery-k3dcarousel-plugin/
[Demo 3]: http://demo.verens.com/k3dCarousel/demo.html
[Download 6]: http://demo.verens.com/k3dCarousel-1.0.zip
[8. jQuery Feature Carousel]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-feature-carousel/
[105T41960-26.png]: /images/20220612/8b9d8c1431ef4fe6b84cbca10de0e9a8.png
[Web Site 7]: http://www.bkosborne.com/jquery-feature-carousel
[Download 7]: https://github.com/bkosborne/jQuery-Feature-Carousel
[9. jQuery CSS3 3D Animation]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-css3-3d-animation/
[94_110311141541_1.jpg]: /images/20220612/e42d40ed5a754cb1b39af33521943a91.png
[Web Site 8]: http://richardleggett.co.uk/blog/index.php/2010/05/03/jquery_css3_3d_animation
[Demo 4]: http://richardleggett.co.uk/sketchbook/CSS3DDemo/
[Download 8]: http://richardleggett.co.uk/sketchbook/CSS3DDemo/download.zip
[10. jQuery 3D ObjectVR]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-3d-objectvr/
[105T4F59-34.png]: /images/20220612/4ba99055c6e84e56a65a0c5e8e2031fb.png
[Web Site 9]: http://www.tres-graficos.jp/blog/files/article.php?id=64
[Demo 5]: http://www.tres-graficos.jp/blog/resources/objectvr/jquery-objectvr-0.1/
[Download 9]: http://www.tres-graficos.jp/blog/files/dl.php?id=64
[11. jQuery 3D Levitation Effect]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-3d-levitation-effect/
[105T433J-38.png]: /images/20220612/45fc495a58454381a66b57bd0d565714.png
[Web Site 10]: http://levitation.rulz.hu/
[Download 10]: http://madsoft.fw.hu/levitation/?download=download
[12. jQuery Smart3D]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-smart3d/
[105T45945-42.png]: /images/20220612/6e67fd9d25764839bb85f2cc7f05486e.png
[Web Site 11]: http://4coder.info/en/code/jquery-plugins/smart3d/
[Demo 6]: http://4coder.info/demo/jquery-smart3D/
[Download 11]: http://4coder.info/en/code/jquery-plugins/smart3d/download/
[13. 3D Sphere Using jQuery]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/3d-sphere-using-jquery/
[1111251230-43.png]: /images/20220612/1f4a7b98221c40618f195d841866be6a.png
[Web Site 12]: http://www.devirtuoso.com/2009/09/3d-sphere-using-jquery/
[Demo 7]: http://www.devirtuoso.com/Examples/3D-Engine/sphere.html
[Download 12]: http://www.devirtuoso.com/Examples/3D-Engine/sphere.zip
[14. jQuery SSCarousel]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-sscarousel/
[105T43T3-50.png]: /images/20220612/670724ec030c442080284783dbfcac7d.png
[Web Site 13]: http://www.southside-studios.com/open-source/jquery/sscarousel/
[Download 13]: http://www.southside-studios.com/open-source/jquery/sscarousel/jquery.carousel.js
[15. jQuery Three Dee]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-three-dee/
[94_110311112342_1.jpg]: /images/20220612/5e0339cf299a4def9da26c4532792c34.png
[Web Site 14]: http://www.stevefenton.co.uk/Content/Jquery-Three-Dee/
[Demo 8]: http://www.stevefenton.co.uk/cmsfiles/assets/File/threedee.html
[16. TextDepth_ 3D-text jQuery Plugin]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/textdepth-3d-text-jquery-plugin/
[111125DU-55.png]: /images/20220612/38f390c335f54880b81777df7e8a60f7.png
[Web Site 15]: http://demo.morkalork.com/jQuery/3Dtext/
[Download 14]: http://demo.morkalork.com/jQuery/3Dtext/textDepth/textDepth-1.0.js
[17. jQuery 3D Label Effects]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-3d-label-effects/
[94_110311141424_1.jpg]: /images/20220612/ebf3de68da8541a4ad2a924452ce2951.png
[Web Site 16]: http://keith-wood.name/labelEffect.html
[18. 3d tag cloud]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/3d-tag-cloud/
[105T44454-66.png]: /images/20220612/82c459ffc7474f91ae128cbfdefb99a5.png
[Web Site 17]: http://www.iangeorge.net/snippets/tags/
[Download 15]: https://bitbucket.org/elbeanio/jquery.tagsphere/downloads
[19. jQuery TagCanvas]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/jquery-tagcanvas/
[105T41441-70.png]: /images/20220612/cfd11c662fa240c5883f58795699f376.png
[Web Site 18]: http://www.goat1000.com/tagcanvas.php
[Demo 9]: http://www.goat1000.com/tagcanvas-weighted.php
[Download 16]: http://www.goat1000.com/tagcanvas.js?1.6.1
[20. Tagosphere jQuery 3D Tag Cloud]: http://www.jquery.wisdomplug.com/jquery-plugins/3d-jquery-plugins-jquery-plugins/tagosphere-jquery-3d-tag-cloud/
[111125OO-71.png]: /images/20220612/ceec4567397e4e7eaa81faf6003451cb.png
[Web Site 19]: http://plugins.jquery.com/project/tagosphere
[Demo 10]: http://iwashereclub.com/page/intro
[Download 17]: http://plugins.jquery.com/files/jquery.tagosphere.js.txt
[http_www.oschina.net_news_16202_20-smashing-3d-effects-using-jquery]: http://www.oschina.net/news/16202/20-smashing-3d-effects-using-jquery