web前端进阶＜7＞：3d图像翻转效果

这几天又闲着无聊，自己学的东西又有一点不牢固了，需要写一个小程序来巩固一下，相信大家也时有同感吧！那么这一期就给大家带来一个炫酷的相册3d翻转效果，如果搭上炫酷的文字和动画那肯定是高端、霸气上档次的：

前面我也给大家制作过一个很常见的3d旋转相册：
(168条消息) web前端进阶:＜2＞转换的补充、动画和小案例_编程学渣ズ的博客-CSDN博客_前端动画小案例https://blog.csdn.net/aiwanchengxu/article/details/124586701

这个小案例是网上非常常见的一个小程序，就是使用一个大盒子里面放六个小盒子，通过transform来将这几个面移动变化到各个面上，因为里面放了图片，加上动画效果就可以实现这种旋转的、炫酷的魔方效果；

这一个小程序其实可以看做是之前的那个魔方放大了，我们只显示他的一个面，然后通过js代码来控制这个魔方的旋转即可，只是在之前的案例上进行了升级而已，废话不多说，我们上代码：

1、html部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3d-cube</title><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/cube.css"><audio src="./resource/music/爱江山更爱美人(Live) - 周华健.mp3" autoplay></audio>
</head><body><div class="last"><span class="iconfont icon-medianext"></span></div><div class="next"><span class="iconfont icon-medianext"></span></div><div class="contain"><div><span>人生短短几个秋</span><img src="./resource/img/wallpaper01.jpg" alt=""></div><div><span>不醉不罢休</span><img src="./resource/img/wallpapers02.png" alt=""></div><div><span>东边的美人，西边黄鹤楼</span><img src="./resource/img/wallpaper03.jpg" alt=""></div><div><span>人间四月芳菲尽</span><img src="./resource/img/wallpapers04.png" alt=""></div></div><script src="./js/3dcube.js"></script>
</body></html>

布局很简单，一个大盒子里面同样放了四个小盒子，为什么是四个？因为我们没有左右旋转，如果想要实现的小伙伴也可以自己动手尝试一下，原理是一模一样的；这里除了这四个带有照片的盒子外，还有两个盒子，last和next，他们是控制魔方旋转的按钮，我们可以直接使用固定定位定在浏览器的视口上；其实这里的文字也是定位定的；

2、重点就是这个css样式

* {margin: 0px;padding: 0px;box-sizing: border-box;
}
body {perspective: 1000px;overflow: hidden;
}
body .last {position: fixed;left: 50%;top: 10px;transform: translateX(-50%) rotateZ(-90deg);z-index: 99;
}
body .last span {font-size: 50px;color: orange;
}
body .next {position: fixed;bottom: 50px;left: 50%;z-index: 99;transform: translateX(-50%) rotateZ(90deg);
}
body .next span {font-size: 50px;color: orange;
}
body .contain {width: 100%;height: 800px;margin: 0px auto;transition: all 1s linear;transform-style: preserve-3d;position: relative;/*        &:hover{transform: rotateX(360deg);} */
}
body .contain div {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;
}
@keyframes font {from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
body .contain div span {font-size: 50px;z-index: 100;cursor: pointer;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #cce7f8;animation: font 0.5s alternate infinite;
}
body .contain div:nth-child(1) {transform: translateZ(400px);
}
body .contain div:nth-child(2) {transform: translateZ(-400px);
}
body .contain div:nth-child(3) {transform: translateY(-400px) rotateX(90deg);
}
body .contain div:nth-child(4) {transform: translateY(400px) rotateX(-90deg);
}
body .contain div img {width: 100%;height: 100%;
}

有很多人会在调整盒子的位置的时候可能会晕头转向，有时候通过位移旋转变换啊总是不能将盒子移到自己想要的位置，这里我也常常会这样，我做完之后才发现，我是喜欢一次性将所有的盒子都放到脑子里想象的那个位置，看似能一次性成功，其实是犯了大忌，我们对于这种很容易搞错的地方应该一步一步来，我们可以先移动一个盒子，在将这个盒子作为参照物来移动其他的盒子，这样就不容易晕头；

那么css的样式要注意的就是如何实现这种3d效果呢？首先body需要开启透视：

 perspective: 1000px;overflow: hidden;

这里我给的视距是1000px，表示用户和z面的距离，z面是啥面呢？你可以将你的屏幕左上角看做是圆点，向下是y正半轴，向右是x正半轴，那么z的正半轴就是指向你的，也就是你的电脑屏幕就是z平面了；这里设置盒子的宽是1000px 高是800px，如果设置为向前向后移动500px的话，我的盒子就会出现空隙，这个高不够长，盖不住；所以可以看到这里就是设置的400px，向前向后移动400px刚刚好盒子里面就是800px，也就是盒子的高，所以这样的放置就是刚刚盖住；

那么视距的作用？

其实就是实现了近大远小的效果，如果你将视距设置得很小，那么你可能在盒子里面看盒子，设置很大就可能是在很远的地方看盒子，但能明显的看到近大远小的效果；

还有一个就是开启3d空间了：

transform-style: preserve-3d;

先要实现3d效果，这个属性千万不要放错，放错之后变换就不会出现3d的变化，可能是一个很奇怪的变化，这个属性需要放在父元素上面，而且是一个需要发生变换（旋转、平移、缩放效果）的父元素上面，子元素会跟着发生变换，所以有了这个属性就有了3d效果了，要记得使用定位来确定盒子的位置，不然的话也是会出问题的；

3、js部分

let contain = document.getElementsByClassName('contain')[0]
let last = document.getElementsByClassName('last')[0]
let next = document.getElementsByClassName('next')[0]
console.log('开始')
let num = 0
last.addEventListener('click',()=>{console.log('上翻页')num++contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
})
let nextnum = 0
next.addEventListener('click',()=>{console.log('下翻页')num--contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
})

js就是负责实现按钮点击之后切换盒子位置的效果，这里我通过类名获取到了相关的元素，然后添加监听事件，在里面添加变化属性就可以了，这里使用到了一点点小技巧，就是如何记录盒子翻转的角度，代码很少，看一眼就懂，我就不过多赘述；

那么今天的分享就到这里，喜欢的小伙伴就点个赞再走吧！

web前端进阶＜7＞：3d图像翻转效果相关推荐

css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
转载 web前端进阶四阶段
前端工程的四个阶段转载自:http://www.cnblogs.com/lanlanlan00/p/7155663.html 写在前面:引用别人的,在我看来说得比较浅显易懂的. 现在的前端开发倒也并 ...
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）
前言 HTML 是一切Web开发的基础,本文专门为小白整理,针对前端零基础的朋友们,手把手教你学习HTML,让你轻松迈入WEB开发的行列. 首先,感谢 @橙子_ 在HTML学习以及本文编写过程中对我的 ...
web前端进阶之路；web前端不能只做普通程序员；web前端应该向前端架构师前进
有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计 ...
Web前端进阶：学Web前端应了解的知识
随着互联网的快速发展,技术型人才更是受到了企业的欢迎,更多的人倾向于学习软件开发技术,达到更有市场前景的职位.Web前端是一个入行门槛较低的开发技术,更是近几年热门的职业,Web前端不仅薪资高发展前景 ...
web前端进阶_html_基础篇1
HTML基础一.HTML基础语法 1. 什么HTML HTML(Hypertext Markup Language) - 超文本标记语言标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不 ...
web前端开发与应用——图像运用
图像标签的常用属性 img标签是单表签,行内元素.在应用中,img标签常设置的属性有:src.alt.align.width.height和title.为了方便训练,这里重述一下这几个属性的功能. s ...
php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...

web前端进阶＜7＞：3d图像翻转效果

web前端进阶＜7＞：3d图像翻转效果相关推荐

最新文章

热门文章