css3制作3d旋转相册
此处只是记录，解析可见原文：http://www.cnblogs.com/skyblue-li/p/6092799.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>旋转图片</title>
<style>
* {
padding: 0px;
margin: 0px;
}
/*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/
body {
background: #000;
}
#photos {
width: 110px; /*宽度*/
height: 180px; /*高度*/
/*border: 1px solid #ccc;*/ /*加一个灰色边框*/
margin: 160px auto; /*水平居中，高度距离顶部100px*/
transform-style: preserve-3d; /*设置3d环境*/
perspective: 800px; /*设置景深为800px*/
/*transform: rotateY(0deg);*/
transform: rotateX(-10deg);
}
#photos img {
width: 100%;
height: 100%;
position: absolute;
box-shadow: 0 0 8px #eaeaea;
box-shadow: 1px -1px 6px #666;
border-radius: 4px;
-webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
cursor: pointer;
}
#photos div {
width: 1200px;
height: 1200px;
border-radius: 50%;
position: absolute;
top: 102%;
left: 50%;
margin-left: -600px;
margin-top: -600px;
transform: rotateX(90deg);
background: -webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));
}
</style>
<script>
function mystyle() {
var photosDom = document.getElementById('photos');
//获取图片数组
var images = photosDom.getElementsByTagName('img');
//获取图片数量
var len = images.length;
//计算每张图片按Y轴旋转的角度
var deg = Math.floor(360 / len);
var x = 0;
var timer1 = setInterval(function () {
for (var i = 0; i < len; i++) {
images[i].style.transform = 'rotateY(' + (deg * i + x * 0.2) + 'deg) translateZ(380px)'; //deg前面不要加空格
}
x++;
//photosDom.style.transform = "rotateX(-10deg) rotateY(" + (x++) * 0.2 + "deg)"; }, 30); var rx = -10;
var rxf = 1;
var tx = 0;
var txf = 1;
var timer2 = setInterval(function () {
rx = rx + (random(0, 2)) * 0.01 * rxf;
if (rx > 0)
{
rxf = -1;
}
if (rx < -15) {
rxf = 1;
} tx = tx + (random(0, 5)) * 0.01 * txf;
if (tx > 100) {
txf = -1;
}
if (tx < -100) {
txf = 1;
} photosDom.style.transform = "rotateX(" + rx + "deg) translateX(" + tx + "px)";
}, 100);
} // 获取范围内随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
</script>
</head> <body onload="mystyle()">
<div id="photos">
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]02.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]03.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]04.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]05.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]06.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]07.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]08.jpg" />
<img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]09.jpg" />
<div></div>
</div>
</body>
</html>
css3制作3d旋转相册的更多相关文章
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- CSS3制作3D旋转视频展示区
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现3D旋转相册
静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- 低调奢华 CSS3 transform-style 3D旋转
点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...
- CSS3特效----制作3D旋转照片展示区
任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204, ...
随机推荐
- Js面向对象编程
Js面向对象编程 1. 什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2. Js如何定义一个 ...
- IceMx.Mvc
IceMx.Mvc 我的js MVC 框架 开篇 开篇 这篇文章是后补的,前端时间想写一些对于js开发的一些理解,就直接写了,后来发现很唐突,所以今天在这里补一个开篇. 我的js Mvc 框架 基于实 ...
- vps使用（centos)2
SVN Server搭建 1.安装软件包 [root@cloud ~]# yum install subversion mysql-server httpd mod-dav_svn mod-perl ...
- C#异步的世界【上】
新进阶的程序员可能对async.await用得比较多,却对之前的异步了解甚少.本人就是此类,因此打算回顾学习下异步的进化史. 本文主要是回顾async异步模式之前的异步,下篇文章再来重点分析async ...
- MVC源码解析 - 配置注册 / 动态注册 HttpModule
本来这一篇, 是要继续 Pipeline 的, 但是在 Pipeline之前, 我看到了InitModules()方法, 所以决定, 在中间穿插一篇进来. 这一篇来讲一下 IHttpModule 的加 ...
- python3.5学习之路_day1_login
登录程序1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor zhangxiaoyu ...
- Oracle sql执行计划
explain plan explain plan for sql_statement select * from table(dbms_xplan.display) DBMS_XPL ...
- 安装vsftp流程整理
昨天装个FTP,发现之前写的一篇操作日志太简陋了,重新整理了下记在这儿 # 安装 VSFTP yum -y install vsftpd # 创建FTP日志文件路径 touch /var/log/vs ...
- js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
第一种导出table布局的表格 <html> <head> <meta charset="utf-8"> <script type=&qu ...
- Android Tips
(1).设置图片缓存大小,一般可以设置为内存的1/8 int memoryCache = (int) (Runtime.getRuntime().maxMemory() / 8); (2). (3). ...