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

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

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

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

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

    1、html部分：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>3d-cube</title>
    9.     <link rel="stylesheet" href="./iconfont/iconfont.css">
    10.     <link rel="stylesheet" href="./css/cube.css">
    11.     <audio src="./resource/music/爱江山更爱美人(Live) - 周华健.mp3" autoplay></audio>
    12. </head>
    13.  
    14. <body>
    15.     <div class="last">
    16.         <span class="iconfont icon-medianext"></span>
    17.     </div>
    18.     <div class="next">
    19.         <span class="iconfont icon-medianext"></span>
    20.     </div>
    21.     <div class="contain">
    22.         
    23.         <div>
    24.             <span>人生短短几个秋</span>
    25.             <img src="./resource/img/wallpaper01.jpg" alt="">
    26.         </div>
    27.         <div>
    28.             <span>不醉不罢休</span>
    29.             <img src="./resource/img/wallpapers02.png" alt="">
    30.         </div>
    31.         <div>
    32.             <span>东边的美人，西边黄鹤楼</span>
    33.             <img src="./resource/img/wallpaper03.jpg" alt="">
    34.         </div>
    35.         <div>
    36.             <span>人间四月芳菲尽</span>
    37.             <img src="./resource/img/wallpapers04.png" alt="">
    38.         </div>
    39.     </div>
    40.     <script src="./js/3dcube.js"></script>
    41. </body>
    42.  
    43. </html>

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

    2、重点就是这个css样式

    1. * {
    2.   margin: 0px;
    3.   padding: 0px;
    4.   box-sizing: border-box;
    5. }
    6. body {
    7.   perspective: 1000px;
    8.   overflow: hidden;
    9. }
    10. body .last {
    11.   position: fixed;
    12.   left: 50%;
    13.   top: 10px;
    14.   transform: translateX(-50%) rotateZ(-90deg);
    15.   z-index: 99;
    16. }
    17. body .last span {
    18.   font-size: 50px;
    19.   color: orange;
    20. }
    21. body .next {
    22.   position: fixed;
    23.   bottom: 50px;
    24.   left: 50%;
    25.   z-index: 99;
    26.   transform: translateX(-50%) rotateZ(90deg);
    27. }
    28. body .next span {
    29.   font-size: 50px;
    30.   color: orange;
    31. }
    32. body .contain {
    33.   width: 100%;
    34.   height: 800px;
    35.   margin: 0px auto;
    36.   transition: all 1s linear;
    37.   transform-style: preserve-3d;
    38.   position: relative;
    39.   /*        &:hover{
    40.         transform: rotateX(360deg);
    41.        } */
    42. }
    43. body .contain div {
    44.   width: 100%;
    45.   height: 100%;
    46.   position: absolute;
    47.   top: 0px;
    48.   left: 0px;
    49. }
    50. @keyframes font {
    51.   from {
    52.     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;
    53.   }
    54.   to {
    55.     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;
    56.   }
    57. }
    58. body .contain div span {
    59.   font-size: 50px;
    60.   z-index: 100;
    61.   cursor: pointer;
    62.   position: absolute;
    63.   top: 50%;
    64.   left: 50%;
    65.   transform: translate(-50%, -50%);
    66.   color: #cce7f8;
    67.   animation: font 0.5s alternate infinite;
    68. }
    69. body .contain div:nth-child(1) {
    70.   transform: translateZ(400px);
    71. }
    72. body .contain div:nth-child(2) {
    73.   transform: translateZ(-400px);
    74. }
    75. body .contain div:nth-child(3) {
    76.   transform: translateY(-400px) rotateX(90deg);
    77. }
    78. body .contain div:nth-child(4) {
    79.   transform: translateY(400px) rotateX(-90deg);
    80. }
    81. body .contain div img {
    82.   width: 100%;
    83.   height: 100%;
    84. }

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

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

    1.  perspective: 1000px;
    2.   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部分

    1. let contain = document.getElementsByClassName('contain')[0]
    2. let last = document.getElementsByClassName('last')[0]
    3. let next = document.getElementsByClassName('next')[0]
    4. console.log('开始')
    5. let num = 0
    6. last.addEventListener('click',()=>{
    7.     console.log('上翻页')
    8.     num++
    9.     contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
    10. })
    11. let nextnum = 0
    12. next.addEventListener('click',()=>{
    13.     console.log('下翻页')
    14.     num--
    15.     contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
    16. })

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

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

  • 相关阅读:
    tf.compat
    本地环境运行Llama 3大型模型：可行性与实践指南
    云原生存储解决方案Rook-Ceph与Rainbond结合的实践
    echarts legend如何控制标签文字长度
    WPF列表性能提高技术
    邱锡鹏神经网络怎么样,邱锡鹏神经网络答案
    C++滑动窗口求最大值问题(单调队列，multiset，分块dp)
    算法总结--搜索
    Python机器视觉--OpenCV进阶(核心)--常用低通滤波器(方盒滤波器,均值滤波器,高斯滤波器,中值滤波器,双边滤波器)
    公司招了一个腾讯拿30K的人，让我见识到了什么是天花板···
  • 原文地址：https://blog.csdn.net/aiwanchengxu/article/details/128191978