CSS动画图像从小到大和中心

Question

我一直在努力为这个形象增大动画并使其居中。

看看这个视频肯定，它只有9秒。

https://youtu.be/b-5KPH_RGIg

这就是行动

https://jsfiddle.net/09b74624/1/

我正在使用：

.biggerCenter {transform:scale(0.1); transition:transform 0.5s linear; }
.biggerCenter:hover { transform:translate(-50%, -50%) scale(1); }

如何完成这件事？

我的代码出了什么问题？

感谢

Answer 1

您的翻译不会在侧面留出足够的空间。假设您的照片达到50％，则每侧需要25％。 基于你的例子，Here是一个工作小提琴。

.biggerCenter:hover
{
  transform:translate(+25%, +25%) scale(1);
}

另外，我建议你使用一个漂亮的插件。 Fancybox可以满足您的需求。