講解網際網路大型專題活動頁面重構的技巧，構建可複用的html模版，方便後期修改和維護。

企業經常會策劃一些營銷活動來刺激銷售，不管是電商、旅遊還是遊戲類公司，一個大活動除了主會場，往往還包含好幾個分會場，這樣才能顯得隆重而盛大，讓使用者產生一種有促銷的錯覺，藉此以促進銷售。對設計來說，儘可能的減少工作量的方法，就是通過配色和區域性修改元素來完成分會場的設計；對開發或者重構人員來說，要想節約開發時間，就是要透過這些表象的本質，看到分會場之間的共性，儘可能用最簡潔的程式碼，構建出最容易拓展和複用的模版。

我們拿途牛旅遊網的一個活動來說，在重構下面分會場的過程中，能還原出設計稿只是最起碼的要求，但是用更少的時間重構出來，並且能更方便的完成後期維護，才是衡量一個重構水平的標準。程式碼易維護的一個方面就是讓改動的地方變少，要達到這樣的效果，佈局上就不得不講究。

其實Web前端和AfterEffects之間的一些原理有些類似，在AE中，如果要給一個固態層設定繞X軸旋轉，則需要先開啟3D圖層開關；在html中，則需要給css樣式先設定一個叫做“perspective"的屬性，旋轉才有效，不能把perspective和rotate調換順序。如果加在元素本身上，就可以達到正交投影檢視效果；如果是加在父級元素上，使用的就是透視投影檢視，perspective(800px)，表示相機距離螢幕位置為800px。預設相機對準父元素的中心。

另外，為了便於理解css3動畫裡面的繞X軸旋轉,  錄了個gif動畫，其中紅色的箭頭表示X軸，綠色的是Y軸，藍色的是Z軸，AE中中移動中心點用視窗中的工具就好，而css裡面則需要設定transform-origin的值才可以達到效果，記得寫全相容性。

本篇就只需通過觀看圖片名稱、寬度以及進行簡單的除2運算，就可以迅速拓展出其他分會場了，這樣既不用重新寫程式碼，又不用頻繁在軟體之間切換，而且後期修改也方便，可以說是極大的減少了開發成本。

      相信通過本節課的學習，你會對重構有進一步的瞭解，對Web前端和影視後期之間也會產生一些聯絡，Adobe軟體更像是給一些程式碼屬性設定了一套面板，你不需要手寫程式碼width：200px，只需要在寬度那裡填上具體數值就好，如寬：200px; Dreamweaver就是這樣幫助設計師的，不過只要瞭解css屬性後，反而會覺得這種方便是一種限制，所以提倡手寫程式碼。

附高清實操視訊：https://v.qq.com/x/page/e07423e7518.html