CSS3——3D旋转图（跑马灯效果图）
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旋转图（跑马灯效果图）的更多相关文章
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css3 3d旋转动画
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel
插件名称-cloud carousel 最新版本-1.0.5 支持ie6-ie9,firefox,chrome,opera,safari等 1.引入jquery1.4.2.js 和CloudCarou ...
- Css3 3D 旋转动画效果
需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...
- CSS3 3D旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery/CSS3 3D焦点图动画
在线演示 本地下载
- CSS3 3D旋转动画菜单
在线演示 本地下载
- CSS3 3D旋转按钮对话框
在线演示 本地下载
随机推荐
- SQL 笔记 By 华仔
-------------------------------------读书笔记------------------------------- 笔记1-徐 最常用的几种备份方法 笔记2-徐 收缩数据 ...
- 【Win10应用开发】自定义桌面壁纸
调用通用的API来设置桌面壁纸,是一件既简单又有趣的事情,结合XAML可以生成图像的特性,你甚至可以做一个应用,让用户用他所拍的照片做成一张自定义壁纸,然后作为桌面壁纸. 这个API是通用的,应用运行 ...
- samba服务器安装，共享nginx目录
Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,类似于win的网上邻居,让windows和linux实现文件共享 1.安装smaba服务 yum install samba ...
- 前端学PHP之数据类型
× 目录 [1]总括 [2]布尔型 [3]整型[4]浮点型[5]字符串[6]数组[7]对象[8]NULL[9]资源 前面的话 同javascript一样,php也是一门弱类型语言,或者说成类型松散的语 ...
- 百度sdk定位不成功,关闭定位
公司项目有用到百度地图,登录的时候需要定位一次,获取登录的地址信息,在手机无法连接外网的情况,也就无法访问百度定位服务器的时候,定位的回调函数要30秒以上才能返回结果,于是去仔细查百度api,发现没有 ...
- 【记录】T-SQL 分组排序中取出最新数据
示例 Product 表结构: 示例 Product 表数据: 想要的效果是,以 GroupName 字段分组,取出分组中通过 Sort 降序最新的数据,通过示例数据,可以推算出结果数据的 ID 应该 ...
- Java内存模型深度解析：基础部分--转
原文地址:http://www.codeceo.com/article/java-memory-1.html 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何 ...
- PJAX实现
一.浏览器历史API 浏览器历史就像一堆卡片,如下所示:
- learn shell
the basic shell skills. Bourne shell sh ksh Bash psh zsh C shell csh tcsh [root@bogon temp]# cat ...
- Replace conditional with Polymorphism
namespace RefactoringLib.Ploymorphism.Before { public class Customer { } public class Employee : Cus ...