Html5+css3实现3D转动效果

由于最近一直在忙着筹划去上海工作的事情，所以博客更新的速度也就慢了下来。前几天面试了几家公司，也拿到几份offer，总结了一些面试中遇到的问题，最近整理一下会和大家一起分享。今天呢，就和大家分享一下前几天写的一个3d选转的效果。代码写的只是一个简要的demo，仅供学习使用。如果想用在项目中，还需要进一步的优化。另外，打个小广告，我和朋友一起经营的天猫商城终于开业了，是卖一些家用路由器和鼠标键盘的，有需要的朋友请猛点链接宏正数码。好了，下面附上3d效果代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="format-detection"content="telephone=no, email=no" />

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<style type="text/css">
*{box-sizing: border-box;}
.float{ float: left;}
.bg-red{ background-color: red;}
.bg-green{ background-color: green;}
.bg-purple{ background-color: purple;}
.bg-blue{ background-color: blue;}
.higAndWid{ width: 400px; height: 200px;}
.halfHAW{ width: 200px; height: 100px;}
.stage {margin: 0 auto;position: relative;-webkit-perspective: 600px;}
.container {position: absolute;-webkit-transform: translateZ(-200px);-webkit-transform-style: preserve-3d;-webkit-transition:all 0.5s ease-in-out 0s;height: 100%;width: 100%;}
.side {border: 2px solid #8ec63f;height: 100%;position: absolute;width: 100%;-webkit-transition:all 0.5s ease-in-out 0s;}
.front {-webkit-transform: translateZ(200px);}
.right {-webkit-transform: rotateY(90deg) translateZ(200px);}
.back{-webkit-transform: translateZ(-200px) rotateY(180deg);}
.left{-webkit-transform: rotateY(-90deg) translateZ(200px);}
.pageTwo{ -webkit-transform:rotateY(-90deg) translate3d(-200px,0px,0px);}
.pageThree{ -webkit-transform:rotateY(-180deg) translate3d(0px,0px,200px);}
.pageFour{-webkit-transform:rotateY(-270deg) translate3d(200px,0px,0px);}
.list{ width: 400px; margin: 0 auto;}
.list:after{ display: table; content: ""; clear: both;}
.list .container{ -webkit-transform: translateZ(-100px);}
.list .left {-webkit-transform: rotateY(-90deg) translateZ(100px);}
.list .right{-webkit-transform: rotateY(90deg) translateZ(100px);}
.list .front{ -webkit-transform: translateZ(100px);}
.list .back{-webkit-transform: translateZ(-100px) rotateY(180deg);}
.list .pageTwo{ -webkit-transform:rotateY(-90deg) translate3d(-100px,0px,0px);}
.list .pageThree{ -webkit-transform:rotateY(-180deg) translate3d(0px,0px,100px);}
.list .pageFour{-webkit-transform:rotateY(-270deg) translate3d(100px,0px,0px);}

h4{ margin: 0; padding: 0;}
li{font-size: 60px;}
</style>
</head>

<body>
<div class="stage higAndWid">
    <div class="container" id="ctrl">
        <div class="side front bg-red">1</div>
        <div class="side right bg-green">2</div>
        <div class="side back bg-purple">3</div>
        <div class="side left bg-blue">4</div>   
    </div>
</div>
<div class="list">
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-green"></div>
            <div class="side right bg-red"></div>
            <div class="side back bg-blue"></div>
            <div class="side left bg-purple"></div>   
        </div>
    </div>
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-purple"></div>
            <div class="side right bg-green"></div>
            <div class="side back bg-red"></div>
            <div class="side left bg-blue"></div>   
        </div>
    </div>
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-blue"></div>
            <div class="side right bg-green"></div>
            <div class="side back bg-purple"></div>
            <div class="side left bg-red"></div>   
        </div>
    </div>
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-purple"></div>
            <div class="side right bg-red"></div>
            <div class="side back bg-blue"></div>
            <div class="side left bg-green"></div>   
        </div>
    </div>
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-blue"></div>
            <div class="side right bg-purple"></div>
            <div class="side back bg-green"></div>
            <div class="side left bg-red"></div>   
        </div>
    </div>
    <div class="stage halfHAW float">
        <div class="container">
            <div class="side front bg-red"></div>
            <div class="side right bg-blue"></div>
            <div class="side back bg-green"></div>
            <div class="side left bg-purple"></div>   
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../js/hammer.js"></script>

<script>
var ctrl =  $("#ctrl"),
    cont = $(".list .container"),
    hammer = new Hammer(ctrl[0]),
    statue = 0;
//左滑
hammer.on("swipeleft", function(event) {
      switch(statue){
        case 0:
           ctrl.addClass("pageTwo");
           cont.addClass("pageTwo");
           statue += 1;
        break;
        case 1:
            ctrl.addClass("pageThree");
            cont.addClass("pageThree");
            statue += 1;
        break;
        default:
            ctrl.addClass("pageFour");
            cont.addClass("pageFour");
        break;
      } 
    });
//右滑
hammer.on("swiperight", function(event) {
    switch(statue){
        case 2:
           ctrl.removeClass("pageFour");
           cont.removeClass("pageFour");
           statue -= 1;
        break;
        case 1:
            ctrl.removeClass("pageThree");
            cont.removeClass("pageThree");
            statue -= 1;
        break;
        default:
            ctrl.removeClass("pageTwo");
            cont.removeClass("pageTwo");
        break;
      } 
    });
</script>
</body>
</html>

注意：上面代码中使用了jQuery和hammer.js使用的时候请单独引入，hammer.js是处理移动端触摸的，所以在测试时，请使用支持touch事件的浏览器，推荐使用chrome，并调整到相应的模式。具体调整方法，在此不再赘述。

由于作者水平有限，如果大家有更好的实现方法，欢迎大家和我讨论！

有需要购置家用路由器和键盘鼠标的童鞋，不要忘记猛点宏正数码哦，在此欢迎！

转载请标明出处：http://www.cnblogs.com/callmesummer/p/3967383.html

拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：

Html5+css3实现3D转动效果的更多相关文章

24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其添加transition和transform ...
CSS3之3D立方体效果
下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...
CSS3 实现3D旋转木马效果
基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...
css3的3D翻牌效果
利用hover控制动画,一个从翻面向正面翻,一个从正面向反面翻. 利用:backface-visibility: hidden;控制反面的元素不显示. 不支持的浏览器直接切换层级换图. <!DO ...
css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

随机推荐

除去内容中的HTML代码方法
显示内容时,需要截取部分,而不要全部显示.在截取时,会出现这样的情况: 截取一定量的字符串后,可能会把未关闭的表格HTML代码留下来,最終导致界面受影响, 下面的是C#解决办法: public str ...
oracle to_char()及to_date()函数使用
to_char(x[,format]) :将x转换成字符串,可以使用format参数来格式化字符串输出. to_date(x[,format]) :将字符串x转换成日期,可以使用format匹配要转换 ...
cxf的使用及安全校验-01创建简单的服务端接口
最近因为项目的需要,研究了一下webservice的使用: 这里以cxf2.7.0为例,大致介绍一下,也用于备份啦(张立胜) 大致介绍一下项目的情况:项目有maven管理,webservice调用的方 ...
weblogic开机启动-超简单
1.编写weblogic启动脚本,命名为start_weblogic_server.sh,内容如下: #!/bin/bashnohup /home/weblogic/Oracle/Middlewar ...
C#远程获取/读取网页内容
转载自 :http://blog.csdn.net/gisfarmer/article/details/2836904 using System; using System.Collections.G ...
严重: Exception starting filter struts2 --Unable to load configuration
严重: Exception starting filter struts2 Unable to load configuration. - [unknown location] at com.open ...
0129——UINavigationController
1.创建一个UINavigationController self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].boun ...
基于Pojo的开发模式（day03）
上一次的文章讨论到了Spring的设计目标:使得JEE开发更易用. ok,作为一个Java开发人员,应该都知道struts这个框架,不知道是否大家都清楚struts1和struts2的区别. 首先,这 ...
SQL学习笔记——SQL中的数据查询语句汇总
where条件表达式 --统计函数 Select count(1) from student; --like模糊查询 --统计班上姓张的人数 select count(*) from student ...
在fedora 20下使用ssh server
在红帽和centos下,一般安装完后会自带ssh,然后可以通过/etc/init.d/sshd start的方式运行,但是在Fedora 20下,系统改用了另外一套服务开启机制. 首先安装ssh se ...

Html5+css3实现3D转动效果

Html5+css3实现3D转动效果的更多相关文章

随机推荐

热门专题