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技术上完成设备面板的搭建. 我们今天模拟 ...
随机推荐
- iOS常用的加密方式
MD5 iOS代码加密 创建MD5类,代码如下 #import <Foundation/Foundation.h> @interface CJMD5 : NSObject +(NSStri ...
- C#中回调函数的使用方法和区别
归纳来说有两种方式,一种是委托型回调,另一种是接口型回调 委托型回调 委托型回调包括纯委托型和事件型,他们的实现方式是通过公开成员注入的方式,其中纯委托型还可以用构造函数注入.方法注入的方式 接口型回 ...
- xml.etree.ElementTree模块的封装
转载:https://www.cnblogs.com/hongten/p/hongten_python_xml_etree_elementtree.html 1 # -*- coding: utf-8 ...
- jquery 获取 outerHtml
在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包括当前节点本身的代码,然后我们有时候确须要.找遍jQuery api文档也没有不论什么方法能够拿到. 看到有的人通过pa ...
- Tomcat安装与IDEA中的配置
下载Tomcat 先从http://tomcat.apache.org/上下载tomcat9,根据你的系统版本来下载. 本地安装 下载之后解压到你的软件安装目录中,这是我的例子: 然后设置环境变量,如 ...
- Android NDK开发初步
在配置好NDK开发之后就能够使用C/C++开发android了.以下以一个HelloWorld项目来说明 1.新建一个Androidproject 新建一个HelloWorldproject 代码例如 ...
- html 锚点定位
在html中设置锚点定位我知道的有几种方法.在此和大家分享一下: 1.使用id定位: <a href="#1F" name="1F">锚点1< ...
- DataGrid绑定Dictionary问题
问题] 在最近的项目中使用DataGrid的DataGridCheckBoxColumn绑定了后台TagModel类的IsSelected字段,数据源是TagModel类型的Dictionary,运行 ...
- sql 时间转换格式
convert(varchar(10),字段名,转换格式) CONVERT(nvarchar(10),count_time,121)CONVERT为日期转换函数,一般就是在时间类型(datetime, ...
- 使用ZipArchive解压
本文转载至 http://www.apkbus.com/forum.php?mod=viewthread&tid=131390&extra=page%3D1 qqpk360 该用户从未 ...