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循环效果,依据数学函数和细致 ...
随机推荐
- new 小记
new运算符 能根据需求来创建对象的实例 通过与构造函数和一系列初始化过程中使用的可选参数来创建对象的实例,对象创建完成后,新创建的对象继承自构造函数的原型 function Person(name) ...
- The system clock has been set back more than 24 hours
由于破解调试需要,更改了系统时间,打开ArcMap会出现"The system clock has been set back more than 24 hours"的错误,原因是 ...
- RecyclerView解析--onViewDetachedFromWindow()/onViewAttachedToWindow()
先看这段源码介绍: /** * Called when a view created by this adapter has been detached from its window. * * &l ...
- HTTP/HTTPs要点
Http(超文本传输协议)是一个属于应用层的面向对象的协议. HTTP结构 HTTP请求: 请求行:Method-Request URI HTTP-Version(CRLF),eg:GET /form ...
- Erlang数据类型的表示和实现（4）——boxed 对象
Boxed 对象 Boxed 对象是比较复杂的对象,在 Erlang 中主标签为 10 的 Eterm 表示一个对 boxed 对象的引用.这个 Eterm 除去标签之后剩下的实际上是一个指针,指向具 ...
- 设计模式C#实现(七)——生成器模式
生成器模式:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. UML类图: 构成: 1.Builder(接口/抽象类)定义了创建一个产品Product的各个部件的方法,返回创 ...
- 烂泥：CentOS安装及配置TFTP服务器
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 为什么要学习有关TFTP服务器的安装及配置呢?主要是为了后续学习有关linux系统的无人值守安装做准备. TFTP简单文件传输协议,使用UDP的69端口 ...
- Windows系统镜像自动添加驱动程序
2016年到了一家公司做网管,经常会为了装系统而烦恼,后来学习了WDS自动部署,但是在学习过程中发现启动镜像boot.wim中没有网卡驱动 导致wds报错,后来经过网上查找相关资料学会了如何向系统里添 ...
- matlab里.*和*的区别
*:矩阵相乘 (cross) .*:矩阵你元素一对一相乘 (dot) 例子: >> a=[2 3];>> b=[4 5];>> a*b' ans = 23 > ...
- TEZ安装试用
下载地址:http://pan.baidu.com/s/1ZNpyI 第一次使用maven编译 tez的时候到tez ui部分报错,google后发现有人遇到类似问题是因为maven版本的问题, 当时 ...