3D Flip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style id="css">
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.wrap{
width: 500px;
height: 300px;
margin: 50px auto;
box-shadow: 0 0 120px #333;
position: relative;
}
/*..................li style.................*/
.piclist{
width: 100%;
height: 300px; /*caution*/
-webkit-perspective:800px; /*景深*/
overflow: hidden;
}
.piclist li{
height: 300px;
position: relative;
float: left; -webkit-transform-style:preserve-3d;
-webkit-transform-origin:center center -150px; /*注意-150px*/
}
.piclist li a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.piclist li a:nth-of-type(1){
background: url(a.jpg) no-repeat;
}
.piclist li a:nth-of-type(2){
background: url(b.jpg) no-repeat; top: -300px;
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
/*-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);*/
}
.piclist li a:nth-of-type(3){
background: url(c.jpg) no-repeat; -webkit-transform:translateZ(-300px) rotateX(180deg); /*翻转过来*/
}
.piclist li a:nth-of-type(4){
background: url(d.jpg) no-repeat; top: 300px;
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
/*-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);*/
}
.piclist li span{
background-color: #333;
position: absolute;
top: 0;
width: 300px; /*注意这里大小和a的大小是不一样的喔*/
height: 300px;
}
.piclist li span:nth-of-type(1){
left: 0; /*靠左*/ -webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
}
.piclist li span:nth-of-type(2){
right: 0; /*靠右*/ -webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
}
/*......................btn sytle............*/
.btnlist{
position: absolute;
right: 0;
bottom: -50px;
}
.btnlist li{
float: left;
width: 30px;
height: 30px;
text-align: center;
background-color: gray;
margin-right: 10px;
border-radius: 50%;
font: italic 16px/30px "Arial";
cursor: pointer;
color: #fff;
-webkit-user-select:none;
}
.btnlist .active{
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="piclist" id="piclist">
<!-- <li>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<span></span>
<span></span>
</li> -->
</ul>
<ol class="btnlist" id="btnlist">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script>
var oPic=document.getElementById("piclist");
var aPicList=oPic.getElementsByTagName("li");
var oBtn=document.getElementById("btnlist");
var aBtnLi=oBtn.getElementsByTagName("li");
var oCss=document.getElementById("css");
var sCss=""; var oneW=100; //调整此li宽度或间隔时间来调整效果
var iNum=parseInt(oPic.clientWidth/oneW);
var iZindex=0;
var sPic="";
var arrZ=[];
for(var i=0;i<iNum;i++){
i>iNum/2?iZindex--:iZindex++;
arrZ.push(iZindex);
sPic+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><span></span><span></span></li>';
sCss+=".piclist li:nth-of-type("+(i+1)+"){z-index:"+iZindex+";}"; //z-index:iZindex(X)凡是(只有)变量都是"+var+"，此地外层用双引号
sCss+=".piclist li:nth-of-type("+(i+1)+") a{background-position:-"+oneW*i+"px 0;}";
}
oPic.innerHTML=sPic;
oCss.innerHTML+=sCss;
//或者这样加z-index
// for(var i=0;i<iNum;i++){
// aPicList[i].style.zIndex=arrZ[i]; //一定要在oPic.innerHTML=sPic;后设置z-index
// } for(var i=0;i<aPicList.length;i++){
aPicList[i].style.width=oneW+"px";
}
var iNow=0;
for(var i=0;i<aBtnLi.length;i++){
(function(index){
aBtnLi[index].onclick=function(){
for(var i=0;i<aPicList.length;i++){
aPicList[i].style.WebkitTransition=".5s "+i*100+"ms";
aPicList[i].style.WebkitTransform="rotateX(-"+(index*90)+"deg)"; //index*90
} //console.log(index);
aBtnLi[iNow].className="";
aBtnLi[index].className="active"; //注意这里aBtnLi[index]
iNow=index;
};
})(i);
}
</script>
</body>
</html>
3D Flip的更多相关文章
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- android 细节之 旋转动画
Flip Animation for Android: 近期项目中用到了一个小动画,让物体实现一定的3D旋转效果,现记录例如以下: public class FlipAnimation extends ...
- [转]Flash、Flex、AS3.0框架及类库资源收集之十全大补
原文地址:http://www.d5power.com/portal.php?mod=view&aid=27 APIs.Libs.Components1.as3ebaylibhttp://co ...
- Webpack + VueJS 学习、跳坑和总结
这篇随笔会陆续地更新下去,用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识. Webpack部分 ① 快速建立一个Webpack-Vue项目开发环境(4.39.1-2019/08/ ...
- Android ViewPager打造3D画廊
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...
- 基于HTML5实现3D热图Heatmap应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- 基于HTML5快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
随机推荐
- IPv4地址（一）概述
IPv4地址的长度是多少? IPv4地址是如何表示的? IPv4地址的构成以及每一部分所起到的作用和占的位数特点? IPv4地址长度为32位. IPv4地址分为两部分:网络号和主机号 网络号部分惟一地 ...
- java eclipse使用不同jdk版本
因为开发需要,两个工程分别需要使用jdk1.6(elipse indigo)和jdk1.8(eclipse neon).因为两个eclipse对于jdk版本的要求不同,若只在环境变量中配置jdk版本, ...
- 前后端分离之fiddler前端开发代理 autoresponder 正则表达式 regex:(?insx) 修正符详解
regex:(?isx)^http://127.0.0.1:3000(/dlscene)?/order/(\w*) http://127.0.0.1:8080/dlscene/order/$2 上面这 ...
- 记录日志(Log4Net)
一:Log4net的简单示例 1.新建控制台应用程序,右键属性,把其框架.NET Framework4 Client Profile 修改为.NET Framework4,此时项目中将会自动添加一个A ...
- linux rz sz命令
rz是receive zmodem的缩写,sz是send zmodem的缩写. 传输文件使用的是zmodem协议,所以叫zmodem. r和s是以服务器为主体的,服务器接收就是r,服务器发送就是s.
- vs2013 solution文件解析
1 定义一个project Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "render", &quo ...
- 详解单页面路由的几种实现原理（附demo）
前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...
- GIT笔记：将项目发布到码云
GIT笔记:将项目发布到码云 发布步骤 1.码云创建项目 记录下项目的远程地址: https://gitee.com/mrsaber/ms_supplyAndSale.git 2.在本地创建GIT仓库 ...
- HTML5_CSS3仿Google Play垂直菜单
在线演示 本地下载
- POJ2104 K-th Number (子区间内第k大的数字)【划分树算法模板应用】
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 40920 Accepted: 13367 Ca ...