jQuery和CSS3打造的3D炫酷特效

简介:

今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效,这个3D特效使用CSS3的3D变化特性实现,简单而非常华丽,希望大家喜欢!

 

  使用3D变化,通过将它们放置于一个三维空间,我们可以让很简单元素变得更加有活力,同时使用CSS的过渡效果,这些元素可以很容易的移动到3D空间中,并且创建一个非常真实的效果。

  主要的想法是创建一个轮播式的画廊,我们可以将一个图片放置在中间,旁边放置两个图片。因为我们使用不同的角度,所以看起来两张旁边的图片好像被设置在一个3D空间中,然后我们旋转它们。

  注意:这里的效果需要你的浏览器支持3D变化效果

  如何工作

<section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
        <a href="#">
            <img src="images/1.jpg" alt="image01">
            <div>http://www.colazionedamichy.it/</div>
        </a>
        <a href="#">
            <!-- ... -->
        </a>
        <!-- ... -->
    </div>
    <nav>
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>
 

 

current     : 0,
// index of current item

autoplay    : false,
// slideshow on / off

interval    : 2000
// time between transitions
代码在线演示:http://www.gbin1.com/technology/jquerytutorial/20120223gallery3dwithcss3andjquery/demo1.html

     本地下载:

http://www.gbin1.com/technology/jquerytutorial/20120223gallery3dwithcss3andjquery/download.html








本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/789454,如需转载请自行联系原作者
目录
相关文章
|
6月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
62 1
jQuery+CSS3自动轮播焦点图特效源码
|
19天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
33 8
|
1月前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
26 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
15 2
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
20 3
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
27 5
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
14 1
|
3月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴

热门文章

最新文章