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

共计 581 个字符，预计需要花费 2 分钟才能阅读完成。

什么是镜头平移，一目了然看下图的镜头效果：
在视频场景中，经常需要实现镜头平移的效果，摄影术语上这叫做 Panning Shot，动画中实现镜头平移效果的方法很多种，比如在 codepen 中搜了下，就找到一个利用 background-position 来实现的用例
Simple CSS Background Panning
codepen 上这个实现其实已经较为简洁，但我在某天实现一个 css 动画镜头平移的需求时想到个更简洁的，hiahia????，只需三行关键 CSS 代码就可搞定，废话少说，先看效果：
三行 CSS 关键代码搞定镜头平移（Panning Shot）动画
主要是利用了 transform-origin 的变换搭配使用 transform:scale()，background-size: contain; 这两个 css 属性实现镜，下面看代码：
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);
}