这几天又闲着无聊，自己学的东西又有一点不牢固了，需要写一个小程序来巩固一下，相信大家也时有同感吧！那么这一期就给大家带来一个炫酷的相册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就是负责实现按钮点击之后切换盒子位置的效果，这里我通过类名获取到了相关的元素，然后添加监听事件，在里面添加变化属性就可以了，这里使用到了一点点小技巧，就是如何记录盒子翻转的角度，代码很少，看一眼就懂，我就不过多赘述；
那么今天的分享就到这里，喜欢的小伙伴就点个赞再走吧！
![[附源码]Python计算机毕业设计SSM交通事故记录信息管理系统（程序+LW)](https://img-blog.csdnimg.cn/5ea282dbacd44ea886358f608263a82c.png)
![[附源码]Python计算机毕业设计Django数字乡村基础治理系统](https://img-blog.csdnimg.cn/7f73ea90c4ae4a5189ea857db15598d9.png)
