SOURCE

transform-origin用于原点变换，这样就可以基于这个原点旋转、缩放等
经验：relative（相对定位）做最外层父级 里面用absolute（绝对定位）定位元素

<div class = "root">
  <a class="container left" href="https://www.apollozz.com/note/index.html">
    <div class = "container-pic"></div>
    <div class = "container-info">xxxxxx</div>
  </a>
  <a class = "container mid">
    <div class = "container-pic"></div>
    <div class = "container-info">xxxxxx</div>
  </a>
  <a class = "container right">
    <div class = "container-pic"></div>
    <div class = "container-info">xxxxxx</div>
  </a>
</div>
媒体查询试实现响应式布局
定位是一层层下去的，子元素位置出现问题追溯他的父级元素.例如子浮动参照父级，父级不是absolute或relative,子可能就参照了body
overflow:hidden 清除浮动 擦除移出
实现图片垂直居中是bottom50%、left50%、translate(-50%,0)、width固定
图片采用固定宽度防止缩放失真
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。不定参数。

html,body{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.root{
  display: flex;
  background: #f5f5f5;
  width: 100%;
  height: 100%;
}

.container{
  position: relative;
  flex: 1;
  height: 100%;
  /* overflow: hidden; */
  transition: all 0.5s;
}

.left{
  background: #3f4869;
}
.mid{
  background: #d96275;
}
.right{
  background: #d1f3f5;
}
.container:hover{
  flex: 2;
}

.container-pic{
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%,0) ;
  /* width: 100%; */
  overflow: hidden;
  animation: none;
}
.left .container-pic{
    background: url("https://www.apollozz.com/images/pic-1.png");
    /* background: #f5f5f5; */
    width: 333px;
  
    height: 212px;
    /* background-size: 666px 212px; */
    /* background-position: 0 0; */
}
.mid .container-pic{
    background: url("https://www.apollozz.com/images/pic-2.png") ;
    /* background: #f5f5f5; */
    width: 315px;
    height: 212px;
    background-size: 666px 212px;
    background-position: 0 0;
}
.right .container-pic{
  width: 315px;
  height: 212px;
  background: #f5f5f5;
}
.container-info{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  transform: translate(0,0);
}
@media screen and (max-width: 600px){
  .root{
    flex-flow:column;
    
  }
  .container-pic{
    transform-origin: left center;
    transform: translate(-50%,50%) scale(0.5,0.5);
    /* animation: picMobile 1s steps(2,end) infinite; */
  }
  
  
}