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. 关于Checbox的操作,已选,未选,判断

    checkbox: $("#chk1").attr("checked",'');//不打勾                 $("#chk2" ...

  2. linux下的常用命令

    1 fg切换前后台作业 将后台作业转换为前台作业,”fg %作业号“ 2 stty改变和打印终端行设置 tostop 阻止后台作业写终端,stty -a显示终端的所有选项 3 uname查看机子信息 ...

  3. 关于多字节、宽字节、WideCharToMultiByte和MultiByteToWideChar函数的详解

    所谓的短字符,就是用8bit来表示的字符,典型的应用是ASCII码. 而宽字符,顾名思义,就是用16bit表示的字符,典型的有UNICODE. **************************** ...

  4. Cesium原理篇：3最长的一帧之地形(4：重采样)

           地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方 ...

  5. LeetCode刷题系列

    LeetCode 我们工作面试和提高自身数据结构和算法能力的时候往往需要刷刷题,我选择LeetCode是通过一个留学论坛了解的.专业,覆盖语种全面. 提前说说刷题的心得: 尽量手写代码,少使用IDE的 ...

  6. 你真的会玩SQL吗？删除重复数据且只保留一条

    在网上看过一些解决方法 我在此给出的方法适用于无唯一ID的情形 表:TB_MACVideoAndPicture 字段只有2个:mac,content mac作为ID,正常情况下mac数据是唯一的,由于 ...

  7. PHP+MySQL中实现分页

    你只需要在需要添加页的页面加入这几行代码 <?phpinclude 'form.class.php'; $p=new Page(100, 'Demo01.php');//这里需要传递两个参数,参 ...

  8. SpringBoot整合MyBatis

    转载请在文章最上方加上此句话:原文地址:http://www.cnblogs.com/zhuxiaojie/p/5836159.html 前言:这段时间用springboot感觉确实挺好用的,很大程度 ...

  9. jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点

    什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...

  10. ASP.NET Core中的ActionFilter与DI

    一.简介 前几篇文章都是讲ASP.NET Core MVC中的依赖注入(DI)与扩展点的,也许大家都发现在ASP.NET CORE中所有的组件都是通过依赖注入来扩展的,而且面向一组功能就会有一组接口或 ...