jQuery+CSS3实现3D立方体旋转效果


Posted in Javascript onNovember 10, 2015

本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图:

jQuery+CSS3实现3D立方体旋转效果

切换图片过程中,图片进行旋转:

jQuery+CSS3实现3D立方体旋转效果

HTML结构
3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。

<section>
 <div id="css3dimageslider" class="transparency">
 <ul>
  <li> <img src="img/css3dimg1.jpg"> </li>
  <li> <img src="img/css3dimg2.jpg"> </li>
  <li> <img src="img/css3dimg3.jpg"> </li>
  <li> <img src="img/css3dimg4.jpg"> </li>
 </ul>
 </div>
 <ul id="css3dimagePager">
 <li class="active">Image 1</li>
 <li>Image 2</li>
 <li>Image 3</li>
 <li>Image 4</li>
 </ul>
 <p id="css3dtransparency" class="active">点击上面的按钮切换图片</p>
</section>

CSS样式
为了制作3D透视效果,需要在#css3dimageslider元素上设置perspective 透视属性,并在它里面的无序列表元素上设置transform-style: preserve-3d;,由于IE浏览器不支持这个属性,所以在IE浏览器中是看不到效果的。接下来通过:nth-child选择器分别选择每一个列表项,并通过translateZ和rotateY属性对它们进行3D转换,形成立方体效果。

#css3dimagePager, #css3dtransparency {
 text-align: center;
 position: relative;
 z-index: 11;
 padding: 0 0 10px;
 margin: 0;
}
#css3dimagePager li {
 padding-right: 2em;
 display: inline-block;
 cursor: pointer;
}
#css3dimagePager li.active, #css3dtransparency.active {
 font-weight: bold;
}
#css3dimageslider {
 -webkit-perspective: 800;
 -moz-perspective: 800px;
 -ms-perspective: 800;
 perspective: 800;
 -webkit-perspective-origin: 50% 100px;
 -moz-perspective-origin: 50% 100px;
 -ms-perspective-origin: 50% 100px;
 perspective-origin: 50% 100px;
 margin: 100px auto 20px auto;
 width: 450px;
 height: 400px;
}
#css3dimageslider ul {
 position: relative;
 margin: 0 auto;
 height: 281px;
 width: 450px;
 list-style: none;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 50% 100px 0;
 -moz-transform-origin: 50% 100px 0;
 -ms-transform-origin: 50% 100px 0;
 transform-origin: 50% 100px 0;
 -webkit-transition: all 1.0s ease-in-out;
 -moz-transition: all 1.0s ease-in-out;
 -ms-transition: all 1.0s ease-in-out;
 transition: all 1.0s ease-in-out;
}
#css3dimageslider ul li {
 position: absolute;
 height: 281px;
 width: 450px;
 padding: 0px;
}
#css3dimageslider ul li:nth-child(1) {
 -webkit-transform: translateZ(225px);
 -moz-transform: translateZ(225px);
 -ms-transform: translateZ(225px);
 transform: translateZ(225px);
}
#css3dimageslider ul li:nth-child(2) {
 -webkit-transform: rotateY(90deg) translateZ(225px);
 -moz-transform: rotateY(90deg) translateZ(225px);
 -ms-transform: rotateY(90deg) translateZ(225px);
 transform: rotateY(90deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(3) {
 -webkit-transform: rotateY(180deg) translateZ(225px);
 -moz-transform: rotateY(180deg) translateZ(225px);
 -ms-transform: rotateY(180deg) translateZ(225px);
 transform: rotateY(180deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(4) {
 -webkit-transform: rotateY(-90deg) translateZ(225px);
 -moz-transform: rotateY(-90deg) translateZ(225px);
 -ms-transform: rotateY(-90deg) translateZ(225px);
 transform: rotateY(-90deg) translateZ(225px);
}
#css3dimageslider.transparency img {
 opacity: 0.7;
}

JavaScript

最后在jQuery代码中,在点击按钮的时候相应的#css3dimageslider ul元素的rotateY属性,是器旋转,并为其添加一个.active class。

<script>
 $(document).ready(function() {
 
 $("#css3dimagePager li").click(function(){
 var rotateY = ($(this).index() * -90); 
 $("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});
  $("#css3dimagePager li").removeClass("active");
  $(this).addClass("active");
 });
 
 $("#css3dtransparency").click(function() {
  $("#css3dimageslider").toggleClass("transparency");
  $(this).toggleClass("active");
 });
 
 });
</script>

以上就是jQuery结合CSS3来制作3D立方体旋转效果的关键代码分享,希望对大家学习有所帮助。

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
jQuery 选择器理解
Mar 16 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 #Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 #Javascript
js密码强度校验
Nov 10 #Javascript
详解javascript函数的参数
Nov 10 #Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 #Javascript
javascript实现五星评分功能
Nov 10 #Javascript
javascript实现密码验证
Nov 10 #Javascript
You might like
php+mysql 实现身份验证代码
2010/03/24 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
js获取一组日期中最近连续的天数
2017/05/25 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
python集合类型用法分析
2015/04/08 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python编程实现归并排序
2017/04/14 Python
Python实现的堆排序算法示例
2018/04/29 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python矩阵的转置和逆转实例
2018/12/12 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
中专自荐信
2013/10/13 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
工作散漫检讨书
2014/09/16 职场文书
网络舆情信息简报
2015/07/21 职场文书
python字符串常规操作大全
2021/05/02 Python