3D切割轮播图
预览图：
实现原理：将图片切割构建一个和ul（电脑屏幕）同一个轴的立方体，利用延时旋转实现切割效果
知识点：transform-style属性（必须搭配transform属性使用）
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
节流阀，transitionend
空间布局：
将一张图片分成五份li，每份li放4个span折叠成正方体
轴：轴是整个立方体左右面中心的连线
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} .box {
width: 560px;
height: 300px;
margin: 100px auto 0;
border: 1px solid #ccc;
position: relative;
} .box .imageBox {
list-style: none;
width: 100%;
height: 100%;
/*overflow: hidden;*/
/*视距：呈现近大远小效果 */
/*perspective: 500px;*/
/*3d呈现*/
transform-style: preserve-3d;
} .box .imageBox li {
/* width: 100%;
height: 100%;
float: left;*/
width: 112px;
height: 100%;
float: left;
position: relative;
/*视距：呈现近大远小效果 */
/*perspective: 500px;*/
/*3d呈现*/
transform-style: preserve-3d;
/*加过渡*/
transition:all 1s;
}
.box .imageBox li span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/1.jpg") no-repeat;
} /*拼接立体容器*/
/*1.立体容器旋转中心要在电脑平面上*/
/*2.立体容器每一个面的图片正面朝外*/
.box .imageBox li span:nth-child(1){
background-image: url("images/1.jpg");
transform: translateZ(150px);
}
.box .imageBox li span:nth-child(2){
background-image: url("images/2.jpg");
/*旋转过后轴也会旋转：：：：：：*/
transform: rotateX(90deg) translateZ(150px);
}
.box .imageBox li span:nth-child(3){
background-image: url("images/3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box .imageBox li span:nth-child(4){
background-image: url("images/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: -112px 0;
}
.box .imageBox li:nth-child(3) span{
background-position: -224px 0;
}
.box .imageBox li:nth-child(4) span{
background-position: -336px 0;
}
.box .imageBox li:nth-child(5) span{
background-position: -448px 0;
}
/*.box .imageBox li img{
display: block;
width: 100%;
height: 100%;
}*/
.box .left,
.box .right{
position: absolute;
width: 50px;
height: 70px;
background: rgba(0,0,0,.2);
top:115px;
text-align: center;
line-height: 70px;
font-size: 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.box .right{
right: 0;
}
</style>
</head>
<body>
<!--1.完成这个例子要用到什么知识-->
<!--2.回顾一下3d转换-->
<!--3.轴的正方向，translate rotate 3d转换属性-->
<!--4.rotateX rotateY rotateZ 旋转方向 方法方式套路-->
<!--4.1 顺着轴的正方向看 顺时针旋转是负角度 逆时针旋转是正角度-->
<!--5.过渡完成动画-->
<!--6.通过jquery辅助操作-->
<div class="box">
<ul class="imageBox">
<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 () {
/*1.点击切换图片*/
/*定义一个索引*/
/*看第2张图 -90deg 看第4张图 90deg */
var index = 0;
/*开关*/
var flag = true;
/*2.点击左边的按钮 上一张*/
$('.left').on('click',function () { if(!flag) return false;
flag = false; index --;
console.log(index);
var angle = - index * 90;
$('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
/*设置不同的延时*/
$(this).css('transition-delay',i*0.25+'s');
});
});
/*3.点击右边的按钮 下一张*/
$('.right').on('click',function () { if(!flag) return false;
flag = false; index ++;
console.log(index);
var angle = - index * 90;
$('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
/*设置不同的延时*/
$(this).css('transition-delay',i*0.25+'s');
});
});
/*4.优化 重复点击的时候动画会层叠的执行 节流阀 */
$('li:last').on('transitionend',function () {
/*最后一部分张图片旋转完毕*/
flag = true;
}); });
</script>
</body>
</html>
3D切割轮播图的更多相关文章
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 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个分类 我 ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
随机推荐
- SpringBoot -> @Import使用
@Import 注解出自spring-context包中 package org.springframework.context.annotation; import java.lang.annota ...
- idea 启动springboot项目报找不到主类
今天搭建的一个新springboot项目,运行启动类时控制报找不到主类错误 解决方法: 在idea控制台输入mvn clean install命令
- Angular ngx-echarts图表
1. 安装echarts包.ngx-echarts包 npm install echarts --save npm install ngx-echarts --save 2. angular.json ...
- Windows搭建MongoDB复制集
上篇,我们已经知道了什么是MongoDB的复制集,不知道的可以查看上篇哦,传送门来了. 光说不练,假把式,咱来自己搭建一个复制集.先下载安装哦,不知道的查看上篇哦,https://blog.csdn ...
- Java 网络爬虫，就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识.第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑 ...
- 值类型不允许赋值为Null
与引用类型不同,值类型不可能包含 null 值. 每种值类型均有一个隐式的默认构造函数来初始化该类型的默认值.有关值类型默认值的信息,请参见默认值表. bool false byte 0 char ' ...
- java第1天:简介，入门程序，变量，常量
1 java语言简介 美国的SUN公司开发的静态面向对象的编程语言,后来被甲骨文公司收购,现在也是全球范围内最受欢迎的编程语言. *** 2 计算机进制的相互转换 进制 英文代号 2进制 bin 8进 ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- Apache Kylin 概述
1 Kylin是什么 今天,随着移动互联网.物联网.AI等技术的快速兴起,数据成为了所有这些技术背后最重要,也是最有价值的"资产".如何从数据中获得有价值的信息?这个问题驱动了相关 ...
- 继续学习freertos消息队列
写在前面:杰杰这个月很忙~所以并没有时间更新,现在健身房闭馆装修,晚上有空就更新一下!其实在公众号没更新的这段日子,每天都有兄弟在来关注我的公众号,这让我受宠若惊,在这里谢谢大家的支持啦!!谢谢^ 在 ...