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技术上完成设备面板的搭建. 我们今天模拟 ...
随机推荐
- 【转载】ORM的概念, ORM到底是什么
一.ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使 ...
- iOS多线程与网络开发之多线程概述
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...
- [ACM] hdu 1029 Ignatius and the Princess IV （动归或hash）
Ignatius and the Princess IV Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32767K (Ja ...
- Battery Charging Specification 1.2 中文详解
转: http://blog.csdn.net/liglei/article/details/228 1. Introduction 1.1 Scope 规范定义了设备通过USB端口充电的 ...
- windows平台下为Nginx反向代理（负载均衡）使用openssl增加HTTPS/SSL功能。
1.准备好perl/openssl ActivePerl-5.12.2.1202-MSWin32-x86-293621.msi openssl-0.9.8k.tar.gz 编译 参考这个:http:/ ...
- maven打包时无法加载lib下的jar
© 版权声明:本文为博主原创文章,转载请注明出处 问题描述: 项目在本地部署没有问题,但是使用maven打包时报错: ***(引用jar中某个类的的路径) 不存在 ***(某个java类中的某行某列) ...
- CentOS6下基于Nginx搭建mp4/flv流媒体服务器
CentOS6下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 1.先添加几个RPM下载源 1.1)安装RPMforge的CentOS6源 [roo ...
- MyBatis做动态模糊查询时,like后面要不要加单引号？？
做项目遇到了个奇怪的问题,项目里面要对商品.账户.进行分别的多条件查询,于是我就采用动态多条件分页查询,起初在做账户部分的时候Mybatis是这样写的 <!-- 动态多条件分页查询 --> ...
- mac上利用minikube搭建kubernetes(k8s)环境
友情提示:对于初次接触k8s的同学,强烈建议先看看本文最后的参考文章. 环境: mac os(Mojave) 前提:先安装好kubectl (brew install kubectl) .docker ...
- AOS应用基础平台-模块开发流程
AOS平台简单介绍 AOS应用基础平台基于JavaEE技术体系,以"标准功能可复用.通用模块可配置.行业需求高速开发.异构系统无缝集成"为目标.为软件开发团队提供高效可控.随需应变 ...