transform属性和transition过渡属性，结合jQuery代码实现翻转功能。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>3d翻转相册</title>

     <script src="jquery-3.0.0.min.js"></script>

     <style>

         .container {

             position: relative;

             width: 560px;

             height: 380px;

             margin: 0 auto;

         }

         .items {

             height: 100%;

             margin: 100px auto;

             transform-style: preserve-3d;

             /*实现自动翻转效果，这里只设置翻转一次*/

             animation: autoMove 3s 1 linear;

             /*点击翻转  过渡效果*/

             transition: all 0.5s;

         }

         .item {

             width: 100%;

             height: 100%;

             position: absolute;

             border: 1px solid #c18;
　　　　　　　　　
font-size: 50px;
         }

         /*设置不同的bgc，方便区分*/

         .item:nth-child(1) {

             /*background-image: url("images/01.jpg");*/

             background-color: #cc1188;

         }

         .item:nth-child(2) {

             /*background-image: url("images/02.jpg");*/

             background-color: #0094ff;

         }

         .item:nth-child(3) {

             /*background-image: url("images/03.jpg");*/

             background-color: #22ff22;

         }

         .item:nth-child(4) {

             /*background-image: url("images/04.jpg");*/

             background-color: #666666;

         }

         /*定义动画*/

         @keyframes autoMove {

             from { }

             to {

                 transform: rotateX(360deg);

             }

         }

         /*设置左右翻页箭头样式*/

         .left, .right {

             width: 50px;

             height: 50px;

             line-height: 50px;

             text-align: center;

             color: white;

             font-size: 50px;

             background-color: darkslategray;

             opacity: .5;

             position: absolute;

             top: 50%;

             margin-top: -25px;

             cursor: pointer;

         }

         .left {

             left: -25px;

         }

         .right {

             right: -25px;

         }

     </style>

     <script>

         $(function () {

             var itemNum = $(".items>.item").length;

             var itemDeg = 360 / itemNum;

             $(".items .item").each(function (index, element) {

                 $(element).css({

                     transform: "rotateX(" + index * itemDeg + "deg) translateZ(190px)"

                 });

             });

             var count = 0;//记录点击的次数，右击加1，左击减1

             $(".container .arrow .right").click(function () {

                 count++;

                 $(".items").css({

                     transform: "rotateX("+-90*count+"deg)"

                 });

             });

             $(".container .arrow .left").click(function () {

                 count--;

                 $(".items").css({

                     transform: "rotateX("+-90*count+"deg)"

                 });

             });

         });

     </script>

 </head>

 <body>

     <div class="container">

         <div class="items">

             <div class="item">1</div>

             <div class="item">2</div>

             <div class="item">3</div>

             <div class="item">4</div>

         </div>

         <div class="arrow">

             <div class="left"><</div>

             <div class="right">></div>

         </div>

     </div>

 </body>

 </html>

CSS3——3D翻转相册的更多相关文章

  1. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  2. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

  3. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  4. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  7. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  8. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. 【Win10应用开发】自适应磁贴中的分组

    老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子. 本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现. 当磁贴的内容被分组后,每个组中的内容就会被视为一个整体.比如某磁 ...

  2. lua中的数据类型

    lobject.h: lobject.h: 其中使用GCObject表示的数据类型是需要lua 的gc记录的. lstate.h: lobject.h:

  3. php的mysql\mysqli\PDO(三)PDO

    原文链接:http://www.orlion.ga/1153/ PDO是一种数据库抽象层,不止可以访问mysql还可以访问其他数据库. 一.__construct() PDO::__construct ...

  4. ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...

  5. EntityFramework之数据库以及表基本创建（一）

    前言 之前有学过EF一段时间那时EF才4.0似乎还不太稳定,而现在EF都已7.0版本,同时AspNet Identity都与此大有关联,看来是大势所趋于是开始学习EF,在学EF过程中也遇到一些小问题, ...

  6. easyui-datagrid 列单击事件

    首先要注意的就是,先添加一个js方法,名字可以自定义,但是必须得与下面的option里面的onClickRow:后面的一致即可      <script type="text/java ...

  7. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...

  8. Spire.Pdf 的各种操作总结

     Spire.Pdf 的各种操作总结 简介 试验新产品总是给我带来许多挑战,当然这也是一个引进创新技术的好方法.在这里我要跟大家分享的是使用Spire.Pdf的过程,它是来自E-iceblue公司的轻 ...

  9. Oracle Recovery 02 - 常规恢复之不完全恢复

    背景:这里提到的常规恢复指的是数据库有完备可用的RMAN物理备份. 实验环境:RHEL6.4 + Oracle 11.2.0.4 单实例. 二.常规恢复之不完全恢复:部分数据丢失 2.1 重做日志文件 ...

  10. Yahoo军规

    一.尽可能的减少HTTP请求 每一个图片,文字,js文件,css文件都是一个请求. 可以通过合并来请求来减少HTTP请求 比如:图片为一个请求,js文件为一个请求,css为一个请求 二.使用CDN C ...