3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）
今天用用前两天总结的css3新效果写了一个3d照片环的效果，其中还有些bug大家可以看一看，一起改进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
}
body{
background:#000;
}
#box{
width:133px;
height:200px;
position:absolute;
top:40%;
left:50%;
color:red;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-20deg);
}
#box li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
border-radius:10px;
background:url('images/img2/1.jpg') no-repeat;
transition:1s all ease;
-webkit-box-shadow:0 0 5px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
transform:rotateY(0deg) translateZ(0px);
}
</style>
<script> window.onload=function(){
var oUl=document.getElementById('box');
var N=11; for(var i=0;i<N;i++){
var oLi=document.createElement('li');
oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';
oUl.appendChild(oLi); (function(oLi,i){
setTimeout(function(){
oLi.style.transition='1s all ease '+(200*(N-i))+'ms';
oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
},0);
})(oLi,i);
}
var aLi=oUl.children;
var y=0;
aLi[0].addEventListener('transitionend',function(){
document.onkeydown=function(ev){
if(ev.keyCode==37){
y-=360/N;
keyChange();
}else if(ev.keyCode==39){
y+=360/N;
keyChange();
}
};
},false); aLi[0].addEventListener('transitionend',function(){
document.onmousedown=function(ev){
var disX=ev.clientX-y;
document.onmousemove=function(ev){
y=ev.clientX-disX;
for(var i=0;i<aLi.length;i++){
keyChange();
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
},false); function keyChange(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.transition='1s all ease';
aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
var scale=Math.abs((Math.abs(360/N*i+y)-180)/180);
//aLi[i].innerHTML=scale;
//console.log(scale);
aLi[i].style.opacity=scale;
}
}
};
</script>
</head>
<body>
<ul id="box"> </ul>
</body>
</html>
今天对着效果进行了修复：修复了模糊度旋转时的bug，添加了ul的转动，使转动在x轴和y轴上都可以进行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
}
body{
background:#000;
}
#box{
width:133px;
height:200px;
position:absolute;
top:40%;
left:50%;
color:red;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-20deg);
}
#box li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
border-radius:10px;
background:url('images/img2/1.jpg') no-repeat;
transition:1s all ease;
-webkit-box-shadow:0 0 5px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
transform:rotateY(0deg) translateZ(0px);
}
</style>
<script> window.onload=function(){
var oUl=document.getElementById('box');
var N=11; for(var i=0;i<N;i++){
var oLi=document.createElement('li');
oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';
oUl.appendChild(oLi); (function(oLi,i){
setTimeout(function(){
oLi.style.transition='1s all ease '+(200*(N-i))+'ms';
oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
},0);
})(oLi,i);
}
var aLi=oUl.children;
var y=0;
var x=-10;
aLi[0].addEventListener('transitionend',function(){
document.onkeydown=function(ev){
if(ev.keyCode==37){
y-=360/N;
change(y,x);
}else if(ev.keyCode==39){
y+=360/N;
change(y,x);
}
};
},false); aLi[0].addEventListener('transitionend',function(){
change(y,-x);
document.onmousedown=function(ev){
var disX=ev.clientX-y;
var disY=ev.clientY-x;
document.onmousemove=function(ev){
y=ev.clientX-disX;
x=ev.clientY-disY;
change(y/3,x/3);
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
},false); function change(y,x){
for(var i=0;i<aLi.length;i++){
aLi[i].style.transition='0s all ease';
aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';
var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;
//aLi[i].innerHTML=scale;
//console.log(scale);
scale<0.3&&(scale=0.3);
aLi[i].style.opacity=scale;
}
}
};
</script>
</head>
<body>
<ul id="box"> </ul>
</body>
</html>
3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）的更多相关文章
- 超酷3D照片展示效果
@{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...
- 3D照片放大展示窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- Android 仿美团网,大众点评购买框悬浮效果之修改版
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- Indy 10.5.8 for Delphi and Lazarus 修改版(2011)
Indy 10.5.8 for Delphi and Lazarus 修改版(2011) Internet Direct(Indy)是一组开放源代码的Internet组件,涵盖了几乎所有流行的I ...
- 3D饼/环Echarts图的实现
首先确保在项目中引入了echarts和echarts-gl"echarts": "^4.9.0","echarts-gl": "^ ...
- css3实现酷炫的3D盒子翻转效果
简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...
- 黄聪：WordPress图片插件：Auto Highslide修改版（转）
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
- Unity3D问题之EnhanceScollView选择角色3D循环滚动效果实现
需求 呈现3D效果(2D素材)选择角色效果 滚动保证层级.缩放比例.间距正常尾随 循环滚动 这个界面需求一般也会有游戏会採用(貌似有挺多) 怎样实现 实现技术关键点 (3D循环效果,依据数学函数和细致 ...
随机推荐
- For循环语句的使用
一.For循环语句 说明:For循环用于循环次数已经确定的情况下. 格式:for(循环变量赋初值; 循环条件; 循环变量增值) { ·····语句 } 举例:求 ...
- 基于MATLAB实现的云模型计算隶属度
”云”或者’云滴‘是云模型的基本单元,所谓云是指在其论域上的一个分布,可以用联合概率的形式(x, u)来表示 云模型用三个数据来表示其特征 期望:云滴在论域空间分布的期望,一般用符号Εx表示. 熵:不 ...
- APP icon 自动来做，photoshop 做圆角图片
项目上传到应用市场,没有美工配合,那就只能自己捉刀了. 有几个点快捷键要注意,对使用ps有帮助 (1)ctrl+enter 建立选区 (2)建立选区后,移动到另外的图层,按delete键就为删除 (3 ...
- Servlet API遍程常用接口和类
本文主要总结Servlet API遍程常用接口和类 Servlet API http://tomcat.apache.org/tomcat-5.5-doc/servletapi/index.html ...
- IOS沙盒
可以先在程序打印沙盒路径: NSLog(@"路径%@",NSHomeDirectory()); ------------------------------------------ ...
- cornerstone 使用
svn 使用方法 Check Out 下载的文件会与源文件产生一个working copy与源文件关联
- 手动设定实例变量的KVO实现监听
手动设定实例变量的KVO实现监听 如果将一个对象设定成属性,这个属性是自动支持KVO的,如果这个对象是一个实例变量,那么,这个KVO是需要我们自己来实现的. 以下给出源码供君测试: Student.h ...
- VIP - virtual IP address
virtual IP address (虚拟 IP 地址)1.是集群的ip地址,一个vip对应多个机器2.与群集关联的唯一 IP 地址 see wiki: A virtual IP address ( ...
- 打印 SpringMVC中所有的接口URL
采用junit test方式 1.配置 simple-test.xml <?xml version="1.0" encoding="UTF-8"?&g ...
- 【mysql】关于innodb_file_format
一.几条mysql命令 通过以下命令看一下mysql中 innodb_file_format的配置 mysql> show engines; +--------------------+---- ...