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. JS函数 -- 功能，语法，返回值，匿名函数，自调用匿名函数，全局变量与局部变量，arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  2. SSIS 参数的值

    一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...

  3. 没有Hyper-V服务，WP Emulator无法启动

    解决: 打开管理工具

  4. [汇编与C语言关系]5. volatile限定符

    现在研究一下编译器优化会对生成的指令产生什么影响,在此基础上介绍C语言的volatile限定符.首先看下面的C程序: /* artificial device registers */ unsigne ...

  5. css中的expression

    最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...

  6. POJ2513-Colored Sticks

    /*思路:类似图论中“一笔画”问题,两根木棒的相连接的端点是一样的颜色,(a,b)--(b,c)--(c, d)....方法:trie树+并查集, 利用trie树建立字符串和某一个节点的映射,并将这些 ...

  7. 创建第一个 local network（II）- 每天5分钟玩转 OpenStack（81）

    上一节通过 Web GUI 创建了 “first_local_net”,本节我们需要搞清楚底层网络结构有了哪些变化? 点击 “first_local_net” 链接,显示 network 的 subn ...

  8. ASP.NET WebAPi之断点续传下载（下）

    前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...

  9. csapp2e-chapter2-homework

    一 前言 看了csapp2e第二章,感觉讲的很透彻,理解了一些以前学组成原理没有学懂的东西.这章最让我感觉深刻的还是计算机是怎么实现c语言中的基本数据类型的表示和操作的,这对程序员理解程序无疑是帮助巨 ...

  10. .NET 中Barcode Library的应用二

    .NET中Barcode Library的应用二 介绍 在上一篇中我已经简单介绍了这个函数库(条形码应用之一------------函数库的简介).在这一篇中我将使用这个库提供更多的操作,希望对大家有 ...