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

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

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

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

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

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