3D图片切换
这个专栏里的所有代码都是从GitHub上copy过来的前端特效存档同时添加了自己的一些理解，包括思路分析和复杂代码的解释创这个专栏的目的也是为了督促自己每天学一个小特效，巩固JavaScript的基本语法知识，希望自己可以坚持下去这个专栏适合有一些html、css基础，学过JavaScript基本的语法，想巩固的小可爱们。每天一更开始~~咱们一起努力，哦耶~????????????????????
·
transition
是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
transition-property: 指定应用过渡属性的名称
transition-duration: 属性以秒或毫秒为单位指定过渡动画所需的时间
transition-timing-function: 用来描述这个中间值是怎样计算的
transition-delay: 规定了在过渡效果开始作用之前需要等待的时间。
让一个红盒子过渡变成蓝盒子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* 谁做过渡给谁加 */
transition: 1s;
}
div:hover {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* 宽变化，持续时间为1s；高变化，持续时间为2s ;这两个变化同时开始，只是持续的时间不同*/
transition: width 1s, height 2s;
}
div:hover {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* 先让宽变化，持续时间为1s；1s之后再让高变化，持续时间为2s */
transition: 1s width, 2s 1s height;
}
div:hover {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3D图片切换
本来有一张动图，上传不上来，大家就看下面这张图脑补一下动起来的样子吧😜
点击按钮之后，会像下面这样一块一块按顺序转到对应的图片
案例需要准备元素大致如下所示：
y轴正方向应该是向下的，画错啦，哈哈哈哈哈🙈
首先来看一下body里面的代码：
<body>
<div class="box">
<!-- 上面的图片特效部分 -->
<ul class="picList" id="pic">
</ul>
<!-- 下面的四个按钮 -->
<ol id="btn">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
接着设置一下body、ul、ol、box的样式
<style id="css">
body,
ul,
ol {
/* 清楚内外边距 */
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 800px;
margin: 50px auto;
}
</style>
有关图片样式的css代码：
<style id="css">
.picList {
width: 800px;
height: 360px;
/* 加透视 */
-webkit-perspective: 800px;
}
.picList li {
width: 25px;
height: 360px;
float: left;
/* 设置为相对定位 */
position: relative;
/* 使被转换的子元素保留其 3D 转换 */
-webkit-transform-style: preserve-3d;
/* 沿z轴负方向移动180pxs，就是让li的大小变小了些 */
-webkit-transform: translateZ(-180px);
}
/*设置上下前后的属性，加了绝对定位保证a的位置可以随着父元素位置的变化来变化；*/
.picList a {
width: 100%;
height: 360px;
position: absolute;
left: 0;
top: 0;
}
/* 左右面 */
.picList span {
width: 360px;
height: 360px;
background: rgb(88, 88, 88);
position: absolute;
top: 0;
}
</style>
设置立方体的各个面
<style id="css">
/* nth-of-type 是对指定类型进行排序选择 */
/* 下面的样式是加在前、下、后、上四个面的 */
/*对于最前面的面来说，直接让红色的图片沿着Z轴向前移动180px即可*/
.picList li a:nth-of-type(1) {
background: url(img/0067GSTNgy1fzwjk8ek7ej312p0tzdj3.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateZ(180px);
}
/*对于下面的面来说，先让红色的图片沿着X轴旋转270度才可以变到下面图片的样子，旋转好之后，沿着Y轴正向移动180px即可*/
.picList li a:nth-of-type(2) {
background: url(img/0067GSTNgy1fzwjk8gt09j312w0u0gqv.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateY(180px) rotateX(270deg);
}
/*对于后面的面来说，先让红色的图片沿着X轴旋转180度才可以变到下面图片的样子，旋转好之后，沿着Z轴负向移动180px即可*/
.picList li a:nth-of-type(3) {
background: url(img/0067GSTNgy1fzwjk8j0r7j312m0tz779.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateZ(-180px) rotateX(180deg);
}
/*对于上面的面来说，先让红色的图片沿着X轴旋转90度才可以变到下面图片的样子，旋转好之后，沿着Y轴负向移动180px即可*/
.picList li a:nth-of-type(4) {
background: url(img/0067GSTNgy1fzwjk8xlcbj312s0u07ac.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateY(-180px) rotateX(90deg);
}
/* 下面的样式是加在左右两个面的 */
/* 当设置了left为0之后就是让360 * 360的span盒子的左沿紧贴li的左面，接着设置旋转的轴为左轴，先让span盒子沿y轴旋转90度，再向前移动180px就可以啦*/
.picList li span:nth-of-type(1) {
left: 0;
-webkit-transform-origin: left;
/*如果有移动或者其它样式，必须先写移动 */
-webkit-transform: translateZ(180px) rotateY(90deg);
}
/*这个和上面是一样的道理*/
.picList li span:nth-of-type(2) {
right: 0;
-webkit-transform-origin: right;
-webkit-transform: translateZ(180px) rotateY(-90deg);
}
</style>
有关按钮的css代码：
<style id="css">
#btn {
padding: 50px;
height: 30px;
}
/* 每个按钮的css样式 */
#btn li {
width: 30px;
height: 30px;
background: #000;
color: #fff;
font: bold 16px/30px Arial;
text-align: center;
float: left;
margin: 0 10px;
border-radius: 50%;
}
/* 点击之后的背景变为橙色 */
#btn .active {
background: #f60;
}
</style>
最后咱们写一下JavaScript代码：
<script>
window.onload = function () {
var oPic = document.getElementById("pic"); //获取上面图片的元素
var oCss = document.getElementById("css"); //css样式的id就是css
//获取每个按钮元素
var aBtn = document.getElementById("btn").getElementsByTagName("li");
// 旋转过程中每个条的宽度
var iLiW = 25;
// 图片可以分成多少个这样的条
var iLength = oPic.clientWidth / iLiW;
var aLi = [];
var sHtml = "";
var sCss = "";
var iZindex = 0;
var iNow = 0;
for (var i = 0; i < iLength; i++) {
i > iLength / 2 ? iZindex-- : iZindex++;
//当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行
sCss += ".picList li:nth-of-type(" + (i + 1) + "){z-index:" + iZindex + ";}\
.picList li:nth-of-type(" + (i + 1) + ") a{background-position:-" + i * iLiW + "px 0px;}" //设置每个条所显示背景的位置
}
//加入到css代码中
oCss.innerHTML += sCss;
//循环iLength次
for (var i = 0; i < iLength; i++) {
//四个链接就是上下前后 两个span就是两个侧面
sHtml += '<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
}
oPic.innerHTML = sHtml;
//获取每个li
aLi = oPic.getElementsByTagName("li");
//给按钮添加点击事件
for (var i = 0; i < aBtn.length; i++) {
//传入的a是当前点击的按钮下标
aBtn[i].onclick = (function (a) {
return function () {
//清除上一次的黄色按钮样式
aBtn[iNow].className = "";
for (var i = 0; i < aLi.length; i++) {
//过渡
aLi[i].style.transition = Math.abs(a - iNow) * 0.5 + "s " + i * 80 + "ms all ease";
//translate的目的就是让图片变小一点
aLi[i].style.WebkitTransform = "translateZ(-180px) rotateX(-" + a * 90 + "deg)";
}
//把当前点击的按钮下标给iNow
iNow = a;
//修改类名，变为黄色
aBtn[iNow].className = "active";
};
})(i);
}
}
</script>
完整代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
body,
ul,
ol {
/* 清楚内外边距 */
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 800px;
margin: 50px auto;
}
/* ———————————————————————————有关图片样式的css代码————————————————————————————————————— */
.picList {
width: 800px;
height: 360px;
/* 加透视 */
-webkit-perspective: 800px;
}
.picList li {
width: 25px;
height: 360px;
float: left;
position: relative;
/* 使被转换的子元素保留其 3D 转换： */
-webkit-transform-style: preserve-3d;
/* 沿z轴负方向移动180pxs */
-webkit-transform: translateZ(-180px);
}
.picList a {
width: 100%;
height: 360px;
position: absolute;
left: 0;
top: 0;
}
/* 是前后面 */
.picList span {
width: 360px;
height: 360px;
background: rgb(88, 88, 88);
position: absolute;
top: 0;
}
/* nth-of-type 是对指定类型进行排序选择 */
/* 下面的样式是加在前、下、后、上四个面的 */
.picList li a:nth-of-type(1) {
background: url(img/0067GSTNgy1fzwjk8ek7ej312p0tzdj3.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateZ(180px);
}
.picList li a:nth-of-type(2) {
background: url(img/0067GSTNgy1fzwjk8gt09j312w0u0gqv.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateY(180px) rotateX(270deg);
}
.picList li a:nth-of-type(3) {
background: url(img/0067GSTNgy1fzwjk8j0r7j312m0tz779.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateZ(-180px) rotateX(180deg);
}
.picList li a:nth-of-type(4) {
background: url(img/0067GSTNgy1fzwjk8xlcbj312s0u07ac.jpg) no-repeat;
background-size: 800px auto;
-webkit-transform: translateY(-180px) rotateX(90deg);
}
/* 下面的样式是加在左右两个面的 */
.picList li span:nth-of-type(1) {
left: 0;
-webkit-transform-origin: left;
/*如果有移动或者其它样式，必须先写移动 */
-webkit-transform: translateZ(180px) rotateY(90deg);
}
.picList li span:nth-of-type(2) {
right: 0;
-webkit-transform-origin: right;
-webkit-transform: translateZ(180px) rotateY(-90deg);
}
/* ———————————————————————————有关按钮的css代码————————————————————————————————————— */
#btn {
padding: 50px;
height: 30px;
}
/* 每个按钮的css样式 */
#btn li {
width: 30px;
height: 30px;
background: #000;
color: #fff;
font: bold 16px/30px Arial;
text-align: center;
float: left;
margin: 0 10px;
border-radius: 50%;
}
/* 点击之后的css变为橙色 */
#btn .active {
background: #f60;
}
</style>
<script>
window.onload = function () {
var oPic = document.getElementById("pic");
var oCss = document.getElementById("css"); //css的id就是css
var aBtn = document.getElementById("btn").getElementsByTagName("li");
// 旋转过程中每个条的宽度
var iLiW = 25;
// 图片可以分成多少个这样的条
var iLength = oPic.clientWidth / iLiW;
var aLi = [];
var sHtml = "";
var sCss = "";
var iZindex = 0;
var iNow = 0;
for (var i = 0; i < iLength; i++) {
i > iLength / 2 ? iZindex-- : iZindex++;
//当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行
sCss += ".picList li:nth-of-type(" + (i + 1) + "){z-index:" + iZindex + ";}\
.picList li:nth-of-type(" + (i + 1) + ") a{background-position:-" + i * iLiW + "px 0px;}" //设置每个条所显示背景的位置
}
oCss.innerHTML += sCss;
//循环iLength次
for (var i = 0; i < iLength; i++) {
//四个链接、两个span
//四个链接就是上下前后 两个span就是两个侧面
sHtml += '<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
}
oPic.innerHTML = sHtml;
//就是上面添加的那一堆
aLi = oPic.getElementsByTagName("li");
//添加下面按钮的点击事件
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = (function (a) {
return function () {
//清除之前的类名
aBtn[iNow].className = "";
for (var i = 0; i < aLi.length; i++) {
//过渡
aLi[i].style.transition = Math.abs(a - iNow) * 0.5 + "s " + i * 80 + "ms all ease";
//translate的目的就是让图片变小一点
aLi[i].style.WebkitTransform = "translateZ(-180px) rotateX(-" + a * 90 + "deg)";
}
//把当前点击的给iNow
iNow = a;
//修改类名
aBtn[iNow].className = "active";
};
})(i);
}
}
</script>
</head>
<body>
<div class="box">
<!-- 上面的图片特效部分 -->
<ul class="picList" id="pic">
</ul>
<!-- 下面的四个按钮 -->
<ol id="btn">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
———————————————下面是transition第三个参数的应用——————————————
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* ease的速度是慢快慢 */
transition: 3s all ease;
}
div:hover {
width: 800px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
—————————————————————————————
5.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier) */
/* cubic-bezier(P1x, P1y, P2x, P2y) */
transition: 5s all cubic-bezier(0.040, 0.065, 0.185, 1.650);
}
div:hover {
width: 800px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
—————————————————————————————
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid #000;
padding: 150px;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 200px;
}
.box div {
height: 100px;
background: red;
transition: 1s all;
}
.box:hover div {
-webkit-transform: rotateX(50deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
—————————————————————————————
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid #000;
padding: 150px;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 200px;
}
.box div {
height: 100px;
background: red;
transition: 1s all;
}
.box:hover div {
-webkit-transform: rotateY(50deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
—————————————————————————————
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid #000;
padding: 150px;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 200px;
}
.box div {
height: 100px;
background: red;
transition: 1s all;
}
.box:hover div {
-webkit-transform: translateZ(-100px);
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
—————————————————————————————
实现盒子的向下转动
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* 设置外面的边框 */
.wrap {
width: 200px;
height: 200px;
padding: 200px;
border: 1px solid #000;
/* 加透视 */
-webkit-perspective: 800px;
}
.box {
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;
transition: 3s all;
}
.box div {
width: 200px;
height: 200px;
position: absolute;
font-size: 100px;
font-weight: bold;
line-height: 200px;
text-align: center;
color: #fff;
}
/* ——————————————————————————————设置六个面的位置———————————————————————————— */
/* 上面 */
.box div:nth-of-type(1) {
background: Red;
/* 设置这个div的下边和box的上边贴住 */
top: -200px;
left: 0;
/* 设置旋转的轴为div下边 */
-webkit-transform-origin: bottom;
/* 首先沿X轴正方向旋转90度，再向前移动100px */
-webkit-transform: translateZ(100px) rotateX(90deg);
}
/* 左边 */
.box div:nth-of-type(2) {
background: blue;
/* 设置这个div的右边和box的左边贴住 */
top: 0px;
left: -200px;
/* 设置旋转的轴为div右边 */
-webkit-transform-origin: right;
/* 首先沿Y轴反方向旋转90度，再向前移动100px */
-webkit-transform: translateZ(100px) rotateY(-90deg);
}
/* 前面的那个面 */
.box div:nth-of-type(3) {
background: yellow;
top: 0px;
left: 0;
/* 直接沿Z轴向前移动100px */
-webkit-transform: translateZ(100px);
}
/* 右边 */
.box div:nth-of-type(4) {
background: green;
/* zhon设置这个div的左边和box的右边贴住 */
top: 0px;
left: 200px;
/* 设置旋转的轴为div左边 */
-webkit-transform-origin: left;
/* 首先沿Y轴正方向旋转90度，再向前移动100px */
-webkit-transform: translateZ(100px) rotateY(90deg);
}
/* 下面 */
.box div:nth-of-type(5) {
background: pink;
/* 设置这个div的上边和box的下边贴住 */
top: 200px;
left: 0;
/* 设置旋转的轴为div上边 */
-webkit-transform-origin: top;
/* 首先沿x轴反方向旋转90度，再向前移动100px */
-webkit-transform: translateZ(100px) rotateX(-90deg);
}
/* 后面 */
.box div:nth-of-type(6) {
background: #f60;
top: 0px;
left: 0;
/* 直接沿着Z轴向后移动100px */
-webkit-transform: translateZ(-100px);
}
/*——————————————————————————————————————————————————————————————————————————*/
.wrap:hover .box {
-webkit-transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<!-- 正方体的六个面 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)