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. 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证

    WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...

  2. 移动web app开发必备 - zepto事件问题

    问题描述: 项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页 正常状态下: 用户在子元素上有交互动作时,默认状态下都是会冒泡到 ...

  3. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  4. 轻量级前端MVVM框架avalon - 控制器

    引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 ...

  5. 传智播客--XAML布局--连连看界面（小白内容）

    一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...

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

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

  7. Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  8. VS 2015 Enterprise第二大坑

    前言 继上篇文章之后,你会继续跌进大坑,这个坑困扰我一上午,同时也会让你大跌眼镜,如果你遇到了,那么恭喜你提升自身能力和解决能力的时机到了,当然你可以通过本文继续少走不必要的弯路[我也是无意中发现的捷 ...

  9. struts2学习笔记--struts.xml配置文件详解

    这一节主要讲解struts2里面的struts.xml的常用标签及作用: 解决乱码问题 <constant name="struts.i18n.encoding" value ...

  10. SpringBoot整合MyBatis

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