最近扒了一个有弹性效果上下翻转demo

上图：

上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    @-webkit-keyframes show

    {

        0%   {

                transform:rotateX(180deg);

                opacity:0;

             }

        50%   {

                transform:rotateX(-25deg);

                opacity:1;

             }

        60%   {

                transform:rotateX(18deg);

                opacity:1;

             }

        70%   {

                transform:rotateX(-13deg);

                opacity:1;

             }

        80%   {

                transform:rotateX(8deg);

                opacity:1;

             }

        90%   {

                transform:rotateX(-6deg);

                opacity:1;

             }

        100% {

                transform:rotateX(0deg);

                opacity:1;

             }

    }

    @-webkit-keyframes hide

    {

        0%   {

                transform:rotateX(0deg);

                opacity:1;

             }

        100% {

                transform:rotateX(-180deg);

                opacity:0;

             }

    }

    *{ margin:0; padding:0;}

    li{ list-style: none;}

    .box{ position:relative;  width:300px; height:200px; margin:100px auto; }

    .box-ul,.box li{width:300px; height:200px;}

    .box-ul{transform-style:preserve-3d;perspective:800px;}

    .box li{ position:absolute;  background-size:cover; background-position:-50% -50%;transform:rotateX(180deg);transform-origin:bottom ; opacity:0;}

    .box li.show{-webkit-transform:rotateX(0deg);-webkit-animation: show .6s; opacity:1;}

    .box li.hide{-webkit-transform:rotateX(180deg); -webkit-animation: hide .6s;opacity:0;}

    .box a{ position:absolute; top:50%;transform: translateY(-50%) ; width:50px; height:50px; line-height: 50px; font-size: 14px; text-decoration: none; color:#fff; text-align:center; border-radius:50%; background-color:red;}

    .box a:nth-of-type(1){left:-80px;}

    .box a:nth-of-type(2){right:-80px;}

    </style>

    <script>

    window.onload = function(){

        var aA = document.getElementsByTagName('a'),

            aLi = document.getElementsByTagName('li');

        var len = aLi.length-1,

            n = 0;

        aA[0].onclick = function(){

            aLi[n].className = "hide";

            n--;

            n = n < 0 ? len : n;

            aLi[n].className = "show";

        }

        aA[1].onclick = function(){

            aLi[n].className = "hide";

            n++;

            n = n > len ? 0 : n;

            aLi[n].className = "show";

        }

    }

    </script>

</head>

<body>

    <div class="box">

        <ul class="box-ul">

            <li class="show" style=" background-image:url(1.jpg)"></li>

            <li style=" background-image:url(2.jpg)"></li>

            <li style=" background-image:url(3.jpg)"></li>

            <li style=" background-image:url(4.jpg)"></li>

            <li style=" background-image:url(5.jpg)"></li>

        </ul>

        <a href="javascript:;">上一张</a>

        <a href="javascript:;">下一张</a>

    </div>

</body>

</html>

演示：demo

扒代码心得：

初次看到这个效果感觉主要是JS做的

因为翻转上来有弹性运动，直接想的是JS弹性运动 不知道CSS3也可是设置  当时仅仅知道 transition 过去 也知道 animation 仅仅理解成 从 A点到B点

用 ul 用css3 转成 3D （transform-style:preserve-3d）同时加上景深 perspective:800px; （张鑫旭大神对景深的解释：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/  ）我个人简单粗暴的理解就是：给了一个三维的视角 ，

rotateX，rotateY,rotateZ 就能 X轴、Y轴、Z轴 设置3D了，换句话说不加其实还是2D平面。

li 初始X轴旋转 transform:rotateX(180deg) 在设置旋转的基点 根据li的底边旋转 （transform-origin:bottom）；
然后 分别 有两个 class 分别 show(翻转上来)、hide(翻转下去)；同时也写两个 animation 对应 keyframes show,keyframes hide
.show：虽然有keyframes show 运动 但是最后还要设置它的运动的最终点 transform:rotateX(0deg)；
.hide:同理
keyframes show 是从 180deg 到 0deg 然后 弹性运动 其实就是 在 50% 的时候 运动 -25deg 10%的频率 来回的设置 deg 达到 弹性的运动，最开始一直这只不好，仔细看别人的代码发现是有规律逐次减少deg，
keyframes hide 仅仅是从 transform:rotateX(0deg); 到 transform:rotateX(-180deg); 同时还有透明度；

剩下的就是 JS 切换给class


　
												


											
css3 弹性效果上下翻转demo的更多相关文章
	

    
								
  1. css3实现色子自动翻转效果
		
    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
    
		
    2. 
						
  2. CSS3之图片3D翻转效果(网页效果--每日一更)
		
    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
    
		
    3. 
						
  3. 那些不错的 [ Html5 +  CSS3 + Canvas ] 效果！
		
    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
    
		
    4. 
						
  4. css3基础教程：CSS3弹性盒模型
		
    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力.  ...
    
		
    5. 
						
  5. CSS3弹性伸缩布局（二）——flex布局
		
    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
    
		
    6. 
						
  6. CSS3弹性伸缩布局(一)——box布局
		
    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
    
		
    7. 
						
  7. 鼠标悬停css3动画效果
		
    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
    
		
    8. 
						
  8. CSS3弹性盒模型布局模块介绍
		
    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
    
		
    9. 
						
  9. css3弹性盒模型flex快速入门与上手(align-content与align-items)
		
    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Jpush极光推送
			
    require 'jpush' class SidkiqJpushWorker include Sidekiq::Worker # args[0] msg : args[1] region_id ;  ...
    
			
    2. 
						
  2. Centos6下安装中文字体
			
    先安装字体管理软件 [root@localhost ~]# yum install fontconfig 将需要安装的字体放到/usr/share/fonts/chinese/目录下 如果不存在这个目 ...
    
			
    3. 
						
  3. System.ComponentModel.DataAnnotations.Schema.TableAttribute 同时存在于EntityFramework.dll和System.ComponentModel.DataAnnotations.dll中
			
    Entity Framework 与 .net4.5 的 System.ComponentModel.DataAnnotations 都有 System.ComponentModel.DataAnno ...
    
			
    4. 
						
  4. 029、限制容器的block IO（2019-01-24 周四）
			
    参考https://www.cnblogs.com/CloudMan6/p/7016050.html   Block IO ,是另一种可以限制容器使用的资源,block IO 指的是磁盘的读写,doc ...
    
			
    5. 
						
  5. qlikview 权限管理和sso集成
			
    简单总结一下 qlikview 权限管理和SSO集成的过程, 在集成qlikview报表过程中碰到了很多坑, 甚至官方文档也不准确.  如果你也有类似的需求, 可以参考一下本文.  需要说明的是, 本 ...
    
			
    6. 
						
  6. 新萌渗透测试入门DVWA 教程1：环境搭建
			
    首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...
    
			
    7. 
						
  7. luogu 2878 贪心
			
    其实这题不难,只是想告诉自己:贪心不全是真的脑残拿最大就AC 此题实际上就是比较x,y优先级利用时间计算得到a[i]t/a[i].d(没错时间在上,并非惯性思维的d在上) t*a[x].d+(t+a[ ...
    
			
    8. 
						
  8. 修改教材P74 一行代码 NineNineTable.java, 让执行结果是个三角形
			
    修改教材P74 一行代码 NineNineTable.java, 让执行结果是个三角形: 提交在IDEA或命令行中运行结查截图,加上学号水印,没学号的不给成绩 2*9=18 3*9=27 4*9=36 ...
    
			
    9. 
						
  9. PHP中遍历二维数组—以不同形式的输出操作
			
    <body> <?php //定义二维索引数组$arr = array(    array("101","李军","男", ...
    
			
    10. 
						
  10. js 中编码（encode）和解码（decode）的三种方法
			
    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 下 ...
    
			
    11.