javascript - CSS3 画像をコンテナの中心にズーム

Question

ギャラリーを作っています。画像をクリックすると、ビューの中心にズームインするはずです。現在、クリックイベントは画像にこのクラスを与えます:

.imgFocus
{
    transition  : All 1s ease;
    transform   : scale(2); 
}

それはうまく見え、画像がズームインします。しかし、画像がどこから始まっても、コンテナの中心にズームインしたいと思います。

このように（モックアップ）：

.imgFocus
{
    transition: All 1s ease;
    transform: translate( 'containerCenter' ) scale(2); 
}

それを行う良い方法はありますか？

score 0 · Accepted Answer

いくつかの解決策

add transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%; 画像へ
background-image + background-position:50% 50% + background-size 200% 200% + コンテナーを基準に追加 & img を削除

2 に答える 2