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循环效果,依据数学函数和细致 ...
随机推荐
- CRM ribbon按钮上引用JS库
在CRM ribbion 按钮上引用 javascript库文件实验,怎么要引用javascript库文件.实验 加载完ribbbion 按钮后立即执行 引用的库文件 (function(){ ale ...
- This application is currently offline. To enable the application, remove the app_offline.htm file from the application root directory.
IIS提示:This application is currently offline. To enable the application, remove the app_offline.htm f ...
- 【读书笔记】iOS-NSPredicate
一,Cocoa提供了一个名为NSPredicate的类,它用于指定过滤器的条件.可以创建NSPredicate对象,通过该对象准确地描述所需的条件,对每个对象通过谓词进行筛选,判断它们是否与条件相匹配 ...
- iOS--APP 登录界面图（xuer）
ViewController.h #import "ViewController.h" @interface ViewController () @property(strong, ...
- iOS 架构模式-MVVM
iOS 架构模式-MVVM MVVM Model-View-ViewModelMVVM 其实是MVC的进化版,他将业务逻辑从VC中解耦到ViewModel,实现VC的瘦身. 做一个简单的登录判断: 创 ...
- 【原/转】UITableview性能优化总结
UITableView作为ios中使用最频繁的控件之一,其性能优化也是常常要面对的,尤其是当数据量偏大并且设备性能不足时.本文旨在总结tableview的几个性能优化tips,并且随着认识的深入,本文 ...
- CocoaPods：管理Objective-c 程序中各种第三方开源库关联
在我们的iOS程序中,经常会用到多个第三方的开源库,通常做法是去下载最新版本的开源库,然后拖拽到工程中. 但是,第三方开源库的数量一旦比较多,版本的管理就非常的麻烦.有没有什么办法可以简化对第三方库的 ...
- iOS之 APP异常捕获反馈给服务器
在我们开发的app中, 不可避免的, 有时候用户使用软件会崩溃. 我们就需要捕获异常, 可以在入口类中加入相应的代码, 可以在每次用户打开程序的时候, 检查一下沙盒中是否有崩溃日志, 如果有, 可以 ...
- 设计模式-01-MVC
概述 Model-View-Controller(MVC),即模型-视图-控制器. MVC将软件系统分成三大部分:Model,View,Controller,三个部分通过某种机制通信 M.V.C的职能 ...
- 二维码扫描利用ZBar实现
上次是根据系统的属性自己封装的一个二维码扫描,这次给大家介绍一下基于ZBar集成的类似于QQ二维码扫描界面的二维码扫描的效果. ...