3D动画效果照片墙demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,
body {
margin: 0;
padding: 0;
/*禁止文字被选中*/
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
overflow: hidden;
}
.box {
position: relative;
height: 500px;
width: 500px;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 2000px;
}
.di {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
transform: translate(-50%, -50%) rotatex(90deg);
transform-style: preserve-3d;
}
.z {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
transform-style: preserve-3d;
/*transform: rotatez(1deg);*/
}
p {
margin: 0;
position: absolute;
top: 0;
/*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/
left: 25px;
height: 200px;
width: 150px;
border: 2px solid #fd7068;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*opacity: .7;*/
font-size: 10px;
line-height: 200px;
text-align: center;
/*box-shadow: 0 0 100px #16ff8b;*/
/*倒影，不兼容*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
/*backface-visibility: hidden;*/
}
</style>
</head>
<body>
<div class="box">
<div class="di">
<div class="z">
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
<p>可以拖拽图片文件进来</p>
</div>
</div>
</div>
<script>
window.onload = function () {
setPs();
move();
drop();
}
//给每个p标签设置位置
function setPs() {
var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
ps[i].style.transform = 'rotatex(-90deg) rotatey(' + i * 30 + 'deg) translatez(400px)'
}
}
//鼠标拖动旋转
function move() {
var zBox = document.querySelector('.z');
var xBox = document.querySelector('.di');
//声明计算鼠标移动速度用的变量
var speedTimer = null;
var speedX = 0;
var speedY = 0;
//声明记录旋转角度的两个变量
var xDegNow = 90;
var zDegNow = 0;
//声明变量记录要旋转的角度
var xDegDistance = 0;
var zDegDistance = 0;
//声明变量记录是否发生鼠标移动事件
var isMove = false;
window.onmousedown = function (e) {
//鼠标按下
//清除过渡属性
xBox.style.transition = '';
zBox.style.transition = '';
//记录按下的坐标以及计算速度的初始坐标
var xstart = e.clientX;
var speedX_start = xstart;
var ystart = e.clientY;
var speedY_start = ystart;
//记录用来计算速度的初始时间
var tstart = new Date().getTime();
var tnow = tstart;
//设置计时器更新计算速度的当时时间
speedTimer = setInterval(function () {
tnow = new Date().getTime();
},10)
window.onmousemove = function (e) {
//鼠标移动
isMove = true;
//记录当时的坐标计算距离
var xnow = e.clientX;
var ynow = e.clientY;
var xDistance = xnow - xstart;
var yDistance = ynow - ystart;
//如果计时超过一定时间（10毫秒），计算速度
if (tnow - tstart >= 10) {
//速度=（现在的坐标-初始坐标）/（现在时间-初始时间）
speedX = (xnow - speedX_start) / (tnow - tstart);
speedY = (ynow - speedY_start) / (tnow - tstart);
//让初始时间和坐标等于现在的时间和坐标
tstart = tnow;
speedX_start = xnow;
speedY_start = ynow;
}
//把鼠标移动距离计算成角度后设置到页面上
zDegDistance = zDegNow - (xDistance / 10);
zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';
xDegDistance = xDegNow - (yDistance / 10);
xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';
};
};
window.onmouseup = function (e) {
//鼠标松开
//清除计时器 清除鼠标移动事件
clearTimeout(speedTimer);
window.onmousemove = null;
//判断如果发生移动
if (isMove) {
//添加过渡属性
xBox.style.transition = 'all 0.5s ease-out';
zBox.style.transition = 'all 0.5s ease-out';
//根据速度计算目标角度，设置到页面上
zDegDistance = zDegDistance - (speedX * 10);
zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';
xDegDistance = xDegDistance - (speedY * 10);
xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';
//记录当前角度的值更新
xDegNow = xDegDistance;
zDegNow = zDegDistance;
//用到的变量重置
isMove = false;
speedX = 0;
speedY = 0;
xDegDistance = 0;
zDegDistance = 0;
}
};
}
//鼠标拖拽文件
function drop() {
//取消鼠标拖拽文件进入窗口的默认行为
window.ondragover = function (e) {
e.preventDefault();
}
window.ondrop = function (e) {
e.preventDefault();
}
//添加拖拽到p标签的事件
var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
ps[i].index = i;
ps[i].ondrop = function (e) {
var w = new FileReader();
w.index = this.index;
w.readAsDataURL(e.dataTransfer.files[0]);
w.onload = function () {
ps[this.index].style.backgroundImage = 'url(' + w.result + ')';
ps[this.index].innerHTML = '';
}
}
}
}
</script>
</body>
</html>
3D动画效果照片墙demo的更多相关文章
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- [MISSAJJ原创] UITableViewCell移动及翻转出现的3D动画效果［58同城cell移动效果］
2015-11-20 很喜欢在安静的状态, 听着音乐,敲着键盘, 和代码们浓情对话, 每一份代码的积累, 都让自己觉得很充实快乐!Y(^_^)Y. 看到58同城app的cell有动画移动出现的特效,很 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- css3 transition属性实现3d动画效果
transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...
- CSS3效果：animate实现点点点loading动画效果（一）
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- 超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
随机推荐
- divide an integer into X parts (as even as possible)
the algorithm is like this: it evenly spreads an integer N over K cells. for i = 0 to K array[i] = N ...
- postgres-xl 集体搭建
pgxl 集群搭建 一 预备 1 下载安装解压源码 /opt/ curl -O http://files.postgres-xl.org/postgres-xl95r1beta1.tar.gz tar ...
- 【转】PHP android ios相互兼容的AES加密算法
APP项目用户密码传输一直没有用HTTPS,考虑到用户的隐私暂时先用AES对密码加密,以后也可以用于手机端与服务端加密交互. PHP的免费版phpAES项目,手机端解码各种不对. 好不容易找了PHP ...
- DLT（Diagnostic Log and Trace）嵌入式系统程序运行记录
http://blog.csdn.net/yanlinembed/article/details/49837975 DLT的使用有属于Application范畴与Context范畴.在使用DLT时,需 ...
- Myclipse 安装 Maven遇见的N个异常
1.Maven 下载好,配置完环境变量,同时在Myeclipse配置好Maven,这时创建Maven项目失败,报如下异常: Could not resolve archetype org.apache ...
- 使用VS软件打开网站在浏览器浏览的方法
1.用VS软件打开网站之后,先检查网站是否使用IIS Express开发 2.若不是,则切换成使用IIS Express开发 3.检查项目使用的托管管道模式设置为经典模式了没有 4.最后选择“在浏览器 ...
- cssText笔记
style.cssText 用来获取/设置元素的样式 设置: <div id= "a" style= "background: red;"> doc ...
- iOS屏幕旋转 浅析
一.两种orientation 了解屏幕旋转首先需要区分两种orientation 1.device orientation 设备的物理方向,由类型UIDeviceOrientation表示,当前设备 ...
- java 协调同步的线程
Example12_8.java public class Example12_8 { public static void main(String args[ ]) { TicketHouse of ...
- js基础之数据类型
一:JavaScript 数据类型:字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 字符串; var carname="Bill Gates ...