將元素從當前位置過渡到視口的中心？

Question

將元素從其當前位置轉換到視口的中心？

這基本上就是我所要求的。

我希望elem從頁面中的任何位置使用類似複選框之類的內容在狀態之間進行切換，平滑地移動到圖像的中心。

我真的很想用純CSS做到這一點。可以做到嗎？

Answer 1

http://codepen.io/anon/pen/LVEYZm

嘗試這樣的事情。問題在於，您沒有在默認狀態下指定transform或top和left，所以當檢查切換時，CSS轉換不知道如何從未定義狀態計算到定義狀態。

img { 
    width: 400px; 
    position: absolute; 
    transition: all 0.3s ease; 
    /* these need to be specified as well */ 
    top: 0; 
    left: 100px; 
    transform: translate(0, 0); 
} 

input:checked { 
    + label { 
     img { 
      /* since they're the values being transitioned */ 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
     } 
    } 
}