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, ...
随机推荐
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- Arduino 各种模块篇 粉尘传感器 dust sensor 空气质量检测
Testing a sensor from here. http://www.seeedstudio.com/wiki/Grove_-_Dust_Sensor It's a dust sensor. ...
- vsftp FTP服务器 server settings , and add different users
建议阅读知识:http://linux.vbird.org/linux_basic/0210filepermission.php 这是关于档案权限,用户,组等的问题.介绍的很有意思. 1. Inst ...
- mongDB
MongoDB[第一篇]MongodDB初识 NoSQL介绍 一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的 ...
- android应用程序fps meter[帧数显示]的分析 —— 浅谈root的风险 (1)
fps meter是常用的检测帧率的软件,该软件需要root权限才能工作,一直比较好奇它一个apk是如何知道系统当前的帧率情况的,就针对此apk分析了一下其工作原理. Apk组成 首先看一下apk的组 ...
- 初识B/S结构编程技术
B/S结构编程语言 ASP(Active Server Page 动态服务器页面)技术 微软早期推出的B/S编程技术,出现在JSP和ASP.NET之前,PHP当时也很不稳定.ASP之前,动态网站使用G ...
- Windows下安装Redmine-2.5.3
安装准备 服务器操作系统:Windows Server 2008 R2 Standard,64位操作系统. RailsInstaller版本:2.2.4 (下载地址http://railsinsta ...
- JS设计模式之观察者模式
观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...
- 卸载jdk以及重新安装jdk
新旧交替重复安装会混乱,个人解决办法是: 1. 用系统 control panel 中 uninstall 卸载java se development kit 和 java update. 2. 打开 ...
- Spark集群搭建步骤
问题: 参考:Spark快速入门指南 – Spark安装与基础使用