简单3D翻转
1、先上图~~~
2、代码
html部分
<body>
<div id="my3d">
<div id="box">
<div id="li1" class="li">1</div>
<div id="li2" class="li">2</div>
<div id="li3" class="li">3</div>
<div id="li4" class="li">4</div>
<div id="li5" class="li">5</div>
<div id="li6" class="li">6</div>
</div>
</div>
<div class="btns">
<a href="javascript:prev();" id="prev">prev</a>
<a href="javascript:next()" id="next">next</a>
</div>
</body>
css部分
#my3d{
-webkit-perspective:;
-webkit-perspective-origin: 50% 50%;
overflow: hidden;
}
#box{
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
}
.li{
width: 400px;
height: 400px;
line-height: 400px;
text-align: center;
font-size: 300px;
color: #fff;
background: #000;
position: absolute;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(90deg);
-webkit-transition: -webkit-transform 1s linear;
}
.li:first-child{
-webkit-transform: rotateX(0deg);
}
.btns{
text-align: center;
}
js部分
var index = 1;
function prev(){
if (index==1) {
return false;
};
var cur = document.getElementById('li'+index);
cur.style.webkitTransform="rotateX(90deg)"; index--; var prev = document.getElementById('li'+index);
prev.style.webkitTransform="rotateX(0deg)"; }
function next(){
if (index==6) {
return false;
};
var cur = document.getElementById('li'+index);
cur.style.webkitTransform="rotateX(-90deg)"; index++; var next = document.getElementById('li'+index);
next.style.webkitTransform="rotateX(0deg)";
}
简单3D翻转的更多相关文章
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 【译】仿Taasky的3D翻转菜单动画实现
最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...
- CSS3—3D翻转
本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- CSS3——3D翻转相册
transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 两个activity的3D翻转动画.md
一.业务需求 这里在公司项目设计时,用到了一个小的需求,就是点击一个按钮然后整个activity的页面进行3d翻转; 二.设计思路 由于是2个activity的之间的翻转动画,就意味着前90度是A页面 ...
- 基于html5顶部导航3D翻转展开特效
基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <header cla ...
随机推荐
- Uploadify帮助文档
auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按 ...
- df 和 du 命令详解
df命令详细用法 a:显示全部的档案系统和各分割区的磁盘使用情形 i:显示i -nodes的使用量 k:大小用k来表示 (默认值) t:显示某一个档案系统的所有分割区磁盘使用量 x:显示不是某一个档案 ...
- poj 2823 单调队列
思路:裸的单调队列. #include<iostream> #include<cstring> #include<cstdio> #include<algor ...
- hdu 4630 树状数组
思路:这题的处理方式和hdu4358有点像.我们用一个pre[x]表示约数x的倍数上次出现的位置,将查询按区间的右节点升序排序.num[i]的约数为j,如果pre[j]为0,就将pre[j]置为i;否 ...
- OpenShare vs Sharepoint
光合信息Openshare是基于SharePoint,Exchange等开发的企业协同门户产品,许多朋友问为什么不直接就用Sharepoint建立企业门户解决方案,而要建议用OpenShare来进行? ...
- php-fpm配置文件详解
第一部分:FPM 配置 参数 | 说明 -p | 命令行中动态修改--prefix ;include=etc/fpm.d/*.conf | 用于包含一个或多个文件,如果glob(3)存在(glob() ...
- CSS3 垂直树状图——运用 :before 和 :after
直接上图(原网址),还有步骤想详解视频.自己CSS3练习demo. [demo] [HTML] <div class="tree"> <ul> <li ...
- ORACLE之PACKAGE
刚学pl/sql编程,写了两个package.pkg_temp_fn和pkg_temp_fn2.内容涉及pl/sql基本语法,游标,存储过程(in,out),函数(有返回值). pkg_temp_fn ...
- HDOJ2007平方和与立方和
平方和与立方和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- jqueryeasyui中文乱码问题
下载的Demo中charset=utf-8,手动改成gb3212,问题解决.