案例:3D切割轮播图
一、3d转换
3D旋转套路：顺着轴的正方向看，顺时针旋转是负角度，逆时针旋转是正角度
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D切割轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
margin: 100px auto 0;
border: 1px solid #ccc;
position: relative;
}
.box .imageBox{
list-style: none;
width: 100%;
height: 100%;
}
.box .imageBox li{
width: 100px;
height: 100%;
float: left;
position: relative;
/* 3D呈现 */
transform-style: preserve-3d;
transition: all 1s;
}
.box .imageBox li span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("1.jpg") no-repeat;
}
/* 拼接立体容器:立体容器旋转中心在电脑平面上,每一个面的图片正面朝外 */
.box .imageBox li span:nth-child(1){
background-image: url("1.jpg");
transform: translateZ(150px);
}
.box .imageBox li span:nth-child(2){
background-image: url("2.jpg");
transform: rotateX(90deg) translateZ(150px);
}
.box .imageBox li span:nth-child(3){
background-image: url("3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box .imageBox li span:nth-child(4){
background-image: url("4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
/* 拼接背景 */
.box .imageBox li:nth-child(1) span{
background-position: 0 0;
}
.box .imageBox li:nth-child(2) span{
background-position: -100px 0;
}
.box .imageBox li:nth-child(3) span{
background-position: -200px 0;
}
.box .imageBox li:nth-child(4) span{
background-position: -300px 0;
}
.box .imageBox li:nth-child(5) span{
background-position: -400px 0;
}
.box .left,
.box .right{
position: absolute;
top: 115px;
width: 50px;
height: 70px;
background: rgba(255, 255, 0,0.1);
text-align: center;
line-height: 70px;
font-size: 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.box .right{
right: 0;
}
.box .left{
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="imageBox">
<!-- ,图片分五部分,五个li的第一个span放第一张图片,第二个span放第二张图片... -->
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<a class="left" href="javascript:;"><</a>
<a class="right" href="javascript:;">></a>
</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
//点击切换图片(定义一个索引)
var index=0;
// 开关
var flag=true;
// 点击左边的按钮,上一张
$(".left").on("click",function(){
if(!flag) return false;
flag=false;
index--;
var angle=-index*90;
$("li").css("transform","rotateX("+ angle +"deg)").each(function(i,item){
// 设置不同的延时
$(this).css("transition-delay",i*0.25+"s");
});
});
//点击右边的按钮,下一张
$(".right").on("click",function(){
if(!flag) return false;
flag=false;
index++;
var angle=-index*90;
$("li").css("transform","rotateX("+ angle +"deg)").each(function(i,item){
// 设置不同的延时
$(this).css("transition-delay",i*0.25+"s");
});
});
//优化:重复点击的时候动画会层叠----使用节流阀flag
$("li:last").on("transitionend",function(){
// 最后一部分图片加载完毕
flag=true;
});
});
</script>
</body>
</html>
三、效果
案例:3D切割轮播图的更多相关文章
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- 3D切割轮播图
预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- transform—切割轮播图
效果演示: 1.结构分析 第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...
- 78.3D立体轮播图（完整兼容手机端和pc端）
效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/ 在此基础上改成需要的3个分类的3D图 由于原有的不支持粘贴复制显示3个分类 我 ...
- js-BOM之offset家族、移动函数的封装升级（轮播图）
Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...
随机推荐
- python之生成器yeild
python生成器Generator——yield 思考: 首先思考这样一个问题: 创建一个列表,但是内存受限,容量一定是有限的.那么如果创建了一个包含100万个元素的列表,不仅占用很大的存储空间,而 ...
- js指定日期时间加一天 ,判断指定时间是否为周末
function dateAdd(startDate) { startDate = new Date(startDate); startDate = +startDate + ***; startDa ...
- Java多线程系列——锁的那些事
引入 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率. 下面先带大家来总体预览一下锁的分类图 java锁的具体实现类 1.乐观锁 VS 悲观锁 乐观锁与悲观锁是 ...
- UI测试用例设计，场景测试法
百度一番,没有发现详细的UI测试用例设计方法,只能自己整理一下,学习.改进. 那么正题来了,我们慢慢缕下思路: 1.整理要测实体中的,处理逻辑.触发规则.动作. 2.将场景测试抽象出来 3.到这个时候 ...
- 使用二进制方式安装K8S时使用kubectl命令报错：The connection to the server localhost:8080 was refused - did you specify the right host or port?
解决思路: kubectl 默认从 ~/.kube/config 配置文件获取访问 kube-apiserver 地址.证书.用户名等信息,如果没有配置该文件,或者该文件个别参数配置出错,执行命令时出 ...
- .NET母版页实例（UI页面）
全文注释: 1.<!DOCTYPE>声明位于文档中的最前的位置,处于<html>标签之前. 2.此标签可告知浏览器文档使用哪种HTML或XHTML规范 3.<!DOCTY ...
- web API .net - .net core 对比学习-依赖注入
今天我们来看一下 .net web api 和 .net core web api依赖注入机制的差异. 首先我们分别在.net web api 和 .net core web api新建文件夹Serv ...
- OO——UML解析
目录 第四单元博客作业 一.前两次作业架构设计 1. 第一次作业 2. 第二次作业 二.架构设计以及对OO方法理解的演进 1. 表达式求导 2. 多线程电梯 3. 地铁线路查询 4. UML图的解析 ...
- 聊聊 ES6 中的箭头函数
首先来两点: 当只有一个参数的时候,那么 () 可以省略 当只有一个 return 的时候,那么 {} 可以省略 当函数体内只有一条语句的时候,那么 {} 也可以省略 下面来几个简单的例子来对比 ES ...
- element-ui tree 设置成单选，并且父级不可选
<el-tree :data="date" //数据来源 show-checkbox //节点是否可被选择 node-key="moduldCode" / ...