三行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);
}