javascript - CSS3 缩放图像到容器中心

Question

我正在制作画廊。单击图像时，它应该放大到 View 中心。现在点击事件会给图像这个类:

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

这看起来很好，图像放大了。但我希望它放大到容器的中心，无论图像从哪里开始。

像这样(模型):

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

有什么好的方法吗？

Answer 1

一些解决方案

• 添加 transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50 %;到 img

• 添加 background-image + background-position:50% 50% + background-size 200% 200% + relative to the container & 移除 img