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循环效果,依据数学函数和细致 ...
随机推荐
- 【.net程序破解】实战之标志位破解绕过注册法
今天有时间玩了下一个不错的软件Advanced System Cleaner,可惜要注册 于是想办法给破解了,这是跟之前不同的地方,属于.NET破解教程: 软件地址 - http://www.crsk ...
- 原型 prototype
原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...
- javascript --- 再谈词法分析
javascript代码是如何执行的呢,分为六个步骤(就像把大象装进冰箱总共分几步?): 第一步:载入第一个js代码段(注:script标签对内的代码或是引用js代码,这也说明js并不是一行一行(单纯 ...
- ArcMap中的名称冲突问题
这是一个非常有趣的问题. 现在我一个点层叫"汶川73",有一个面层也叫"汶川73",使用空间连接工具来计算每个面中被落入有多少个点.但不管怎么算,结果都只能生成 ...
- [ javascript New Image() ] New Image() 对象讲解
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src="xxx.gif"; 这样做就相当于给浏览器缓存了一张图片. 图 ...
- Objective-C
1.OC基础 第一个OC的类 Objective-C: 字符串NSString与NSMutableString iOS开发的入门总结的第一篇 iOS开发的入门总结的第二篇
- Android开发， 如何看logcat
有如下log: android.view.InflateException: Binary XML file line #2: Error inflating class com.hankkin. ...
- Web应用程序系统的多用户权限控制设计及实现-用户模块【7】
前五章均是从整体上讲述了Web应用程序的多用户权限控制实现流程,本章讲述Web权限管理系统的基本模块-用户模块.用户模块涉及到的数据表为用户表. 1.1用户域 为了更规范和方便后期系统的二次开发和维护 ...
- AFNetworking使用方法
官网下载2.5版本:http://afnetworking.com/ 此文章是基于AFNetworking2.5版本的,需要看AFNetworking2.0版本的请看上一篇文章:AFNetworkin ...
- char与TCHAR相互转化
char与TCHAR相互转化 char strUsr[10] = "Hello"; TCHAR Name[100]; #ifdef UNICODE MultiByteToWideC ...