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技术上完成设备面板的搭建. 我们今天模拟 ...
随机推荐
- React学习之受控和非受控组件
受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...
- （八）jQuery中的事件
1.加载DOM在常规的JavaScript中,使用window.onload方法:而在jQuery中,使用$(document).ready(function(){ })方法.window.onloa ...
- SPA路由机制详解（看不懂不要钱~~）
前言 总所周知,随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式.而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统,通过改变页面的UR ...
- C#按指定长度分割字符串
C#按指定长度分割字符串 这几天学习分析声音的波形数据,接收到的是十六进制的数据,需要将数据转换成十进制再绘图,这个过程涉及到字符串的分割,正好可以促进自己对C#相关知识的学习.说到分割字符串,我 ...
- ruby 作为嵌入脚本时使用的注意事项
近期一直在採坑... 假设是作为嵌入式脚本使用ruby的话... 一定会遇到这2个问题... gem安装的,无法在嵌入时使用..为啥.? 由于你没require 'ruby gem' 出现 找不到 E ...
- 安装gi的时候回退root.sh的运行
</pre><pre name="code" class="html">/u01/app/11.2.0/grid/crs/install ...
- 树莓派 CPU & 主板 温度
CPU cat /sys/class/thermal/thermal_zone0/temp | awk '{print $1/1000}' 主板 /opt/vc/bin/vcgencmd measur ...
- linux下压缩成zip文件解压zip文件
linux zip命令的基本用法是: zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表: -a 将文件转成ASCII模式 -F 尝试修复损坏 ...
- 【Android】图片（文件）上传的请求分析结构
怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...
- webpy使用mysql数据库操作(web.database)
webpy_web.database模块 webpy框架中使用mysql管理数据库有两种方法,一种是使用python里面的MySQLdb模块: import MySQLdb 还有一种就是用webpy自 ...