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. C++中static数据成员详解

        本文和大家分享的主要是c++中static数据成员的相关用法及源码示例,希望能帮助大家更好的学习C++. static(静态存储)数据成员 StaticTest.cpp : 定义控制台应用程序 ...

  2. Script component 用法

    在SSIS中,可以使用C#编写脚本,这是十分激动人心的事,能够使用C#代码,使得Script Component无所不能. 第一部分:组件简介Script Component 有三种类型:Source ...

  3. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”

    我就不屁话,能一张图就解决的就不说话了 2015-03-28 14:53:24,440 [10] ERROR log - System.NotSupportedException: LINQ to E ...

  4. Memory Management in Open Cascade

    Open Cascade中的内存管理 Memory Management in Open Cascade eryar@163.com 一.C++中的内存管理 Memory Management in ...

  5. MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单

    一.左侧列表菜单 打开视图Menu.cshtml,增加部分见红框 在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...

  6. jQuery之on

    在jQuery1.9版本中,已经去掉了live和delegate方法,从而将on方法的地位进一步提升. jQuery如此推崇on方法,必有其牛逼的地方.那么我们就有必要了解这个on,并在代码中利用它, ...

  7. swift 中指针的使用UnsafeMutablePointer

    在swift中已经弱化了指针的使用,可以这么使用 let s: NSRange = NSMakeRange(, ) let at = UnsafeMutablePointer<NSRange&g ...

  8. 1Z0-053 争议题目解析577

    1Z0-053 争议题目解析577 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 577.What methods are available to recover lost co ...

  9. 【字符编码】Java字符编码详细解答及问题探讨

    一.前言 继上一篇写完字节编码内容后,现在分析在Java中各字符编码的问题,并且由这个问题,也引出了一个更有意思的问题,笔者也还没有找到这个问题的答案.也希望各位园友指点指点. 二.Java字符编码 ...

  10. JS正则表达式总结

    关于JS的正则用法,已经有很多文章了,大同小异 正则表达式30分钟入门教程 MDN正则表达式 玩转JavaScript正则表达式 ES6正则的扩展