我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看效果

iShot_2022-08-08_20.28.18

实现思路

通过观察知道，大体是一个dom装一个图片，然后有一个右侧和底部的立体效果
然后通过动画变成了多个小dom装多个图片小部分，然后有一个右侧和底部的立体效果
- 先说侧边立体效果，基本就是一个transform: skewY(45deg)与transform: skewX(45deg)来实现
再看大图片与多个小图片的实现
- 大图片可以是一个dom+一整张图片来实现
- 多个小图片怎么搞？难道切图实现吗？
  - 还记得之前常用的雪碧图不？
  - 对，就用background-image与background-position来实现
- 大图转小图怎样通过动画实现？
  1. 可以在触发动画的时候将大dom干掉，然后同步生成一堆小dom
    1. 但是有个问题，会有一瞬间的白页面，尤其是你想将小图片转化成更多的时候，比如100 * 100
  2. 然后还可以用多个小dom拼成一个大dom来显示一张大图片
    1. 是的，实际上就跟小图片dom公用一个dom就ok了，我们只需要加上合适的动画就ok
有了关键思路，再来看动画，很简单，分别是大小变化，位置变化和旋转
- 大小变化有两种实现方式，一种是调整每个小dom，一个是调整最外层的包裹dom，然后通过布局方式将小dom也变大
  - 可以通过外层dom从小变大然后设置justify-content: space-around;让dom自动适应
  - 然后正好也实现了位置的变化
- 当然也可以调整小dom的大小，大小变化了，位置自然就被撑开了，也可以实现，当然我个人认为上面的好一点，不过相差不大
- 旋转的话可以通过rotateZ来实现，可以看到是每次触发动画旋转一圈，那就是rotateZ(360deg)
- 既然只改变大小和rotateZ，感觉就没必要用animation，直接用过渡translation就可以了

具体实现

基础html

  <body>
    <button id="btn" class="magic">Magic 🎩</button>
    <div id="boxes" class="boxes big"></div>
  </body>

实现侧边栏样式

.box::after {
  content: '';
  background-color: #f6e58d;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
}

.box::before {
  content: '';
  background-color: #f9ca24;
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
}

重点是transform: skewY(45deg);

外层dom

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 500px;
  width: 500px;
  position: relative;
  transition: 0.4s ease;
}

小dom与布局dom与动画

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 500px;
  width: 500px;
  position: relative;
  transition: 0.4s ease;
}

.boxes.big {
  width: 600px;
  height: 600px;
}

.boxes.big .box {
  transform: rotateZ(360deg);
}

.box {
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  height: 125px;
  width: 125px;
  transition: 0.4s ease;
}

因为没有专门的animate，所以就都写到一起了

script

function createBoxes() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      const box = document.createElement('div')
      box.classList.add('box')
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      boxesContainer.appendChild(box)
    }
  }
}

createBoxes()

比较简单，其实就是用来控制上面说的background-positon的，当然，触发动画的事件也要有

const boxesContainer = document.getElementById('boxes')
const btn = document.getElementById('btn')

btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

完整代码

总结

重点是background-image与background-position的使用
其他的还好

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

热爱开源，支持开源，拥抱开源！

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

3D 魔法box旋转

前言

正文