三行CSS代码搞定镜头平移（Panning Shot）动画

什么是镜头平移，一目了然看下图的镜头效果：

在视频场景中，经常需要实现镜头平移的效果，摄影术语上这叫做Panning Shot，动画中实现镜头平移效果的方法很多种，比如在codepen中搜了下，就找到一个利用 background-position来实现的用例

Simple CSS Background Panning

codepen上这个实现其实已经较为简洁，但我在某天实现一个css动画镜头平移的需求时想到个更简洁的，hiahia😜，只需三行关键CSS代码就可搞定，废话少说，先看效果：

三行CSS关键代码搞定镜头平移（Panning Shot）动画

这里主要是利用了transform-origin的变换搭配使用 transform:scale() ， background-size: contain; 这两个css属性实现，至于整个图片的展示区域，只需调节transform: scale()的值就行了，下面看代码：

CSS 关键部分代码

  // 背景图片初始样式
.bg {
  ...
  background-size: contain;
  transform-origin: right top;
  transform: scale(3);
  transition: all 2s;
}
// 之后通过JS添加一个样式类就可以啦
.panning-shot {
  top: 0;
  transform-origin: left top;
  background-size: contain;
  transform: scale(3);
}