CSS3新增了很多新的属性，可以用很少的代码实现炫酷的动画效果，但由于兼容性各浏览器的能力存在不足，有特别需求的网站就呵呵啦。H5C3已是大势所趋了，之前看过一个新闻，Chrome将在年底全面转向H5，抛弃了Flash。。

本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。

做好布局之后的效果图

　　添加了animation样式，实现自动旋转，并且鼠标移入，停止动画。（鼠标移入，绕Z轴旋转90度）

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>3D旋转</title>

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

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .container {

             /*指定观察者与平面的距离，使有透视效果*/

             /*若无法正常3d效果，将perspective属性提到更上一个父容器即可(此处已上提，从items-->container)*/

             perspective: 1000px;

             /*让container的伪类有过渡效果--51-54行*/

             /*transition: all 1s;*/

         }

         .items {

             width: 200px;

             height: 200px;

             border: 1px solid #c18;

             margin: 200px auto;

             /*指定子元素定位在三维空间内*/

             transform-style: preserve-3d;

             /*让所有item的父级元素（即items）旋转，item就是围绕着旋转了*/

             animation: autoMove 10s infinite linear;

         }

         .item {

             width: 200px;

             height: 200px;

             background-color: skyblue;

             opacity: .6;

             font-size: 200px;

             line-height: 200px;

             text-align: center;

             position: absolute;

         }

         /*定义自动旋转的动画*/

         @keyframes autoMove {

             from { }

             to {

                 transform: rotateY(-360deg);

             }

         }

         .items:hover {

             /*鼠标移入 暂停动画*/

             animation-play-state: paused;

         }

         .container:hover {

             /*鼠标移入，绕Z轴旋转90deg*/

             /*transform: rotateZ(90deg);*/

         }

     </style>

     <script>

         $(function () {

             var itemNum = $(".container .items .item").length;//要旋转的div的数量

             var itemDeg = 360 / itemNum;//计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度

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

                 $(element).css({

                     //给每一个item设置好位置

                     //rotateY让每一个item绕着Y轴偏移，itemDeg*index是不同索引div的偏移角度

                     //translateZ是控制item在角度偏移后，往他们的正上方移动的距离，数值越大旋转的范围越大

                     transform: "rotateY(" + itemDeg * index + "deg) translateZ(280px)"

                 });

             });

         });

     </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 class="item">5</div>

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

         </div>

     </div>

 </body>

 </html>

CSS3——3D旋转图（跑马灯效果图）的更多相关文章

  1. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  2. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel

    插件名称-cloud carousel 最新版本-1.0.5 支持ie6-ie9,firefox,chrome,opera,safari等 1.引入jquery1.4.2.js 和CloudCarou ...

  5. Css3 3D 旋转动画效果

    需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...

  6. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery/CSS3 3D焦点图动画

    在线演示 本地下载

  8. CSS3 3D旋转动画菜单

    在线演示 本地下载

  9. CSS3 3D旋转按钮对话框

    在线演示 本地下载

随机推荐

  1. 使用JAVA编写电话薄程序，具备添加，查找，删除等功能

    //该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...

  2. MongoDB 内嵌文档

    MongoDB是文档型的数据库系统,doc是MongoDB的数据单位,每个doc相当于关系型数据库的数据行(row),doc和row的区别在于field的原子性:row中的column是不和分割的原子 ...

  3. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  4. Web APi 2.0优点和特点？在Web APi中如何启动Session状态？

    前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...

  5. Util应用程序框架公共操作类(五):异常公共操作类

    任何系统都需要处理错误,本文介绍的异常公共操作类,用于对业务上的错误进行简单支持. 对于刚刚接触.Net的新手,碰到错误的时候,一般喜欢通过返回bool值的方式指示是否执行成功. public boo ...

  6. 附录D 安装ZooKeeper

    D.1    安装ZooKeeper D.1.1   下载ZooKeeper ZooKeeper是Apache基金会的一个开源.分布式应用程序协调服务,是Google的Chubby一个开源的实现.它是 ...

  7. JQuery中使用Ajax实现诸如登录名检测等异步请求Demo

    上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...

  8. 【Spring-web】RestTemplate源码学习

     2016-12-22   by 安静的下雪天  http://www.cnblogs.com/quiet-snowy-day/p/6210288.html 前言 在Web开发工作中,有一部分开发任务 ...

  9. nodejs学习笔记四——express-session

    博友沉沉-_-的这篇express 框架之session分析的已经非常详细了,本人这里就不描述了. 总结其中的几个关键点. 1.http协议规定http链接是无状态的链接,cookie和session ...

  10. 一步一步开发Game服务器（三）加载脚本和服务器热更新（二）完整版

    上一篇文章我介绍了如果动态加载dll文件来更新程序 一步一步开发Game服务器(三)加载脚本和服务器热更新 可是在使用过程中,也许有很多会发现,动态加载dll其实不方便,应为需要预先编译代码为dll文 ...