css 动画 - 将元素从其位置缩放到中心

Question

这是我想要的效果示例：
http://photoswipe.com/
同样的效果用于 WhatsApp 网页上的图像缩放。

我想将元素（不仅仅是图像）缩放到中心，并使用从其位置到页面中心的动画缩放元素。
动画应该是基于 css 的，JS 不应该用于动画目的。

我尝试了以下代码，但它不起作用：

<div></div>

使用CSS：

div {
  width: 100px; height: 100px; background: blue;
transition: transform 1s
}

div:hover {
  transform: scale(2);
}

而且，动画变换之间有什么区别：比例或宽度/高度？

谢谢

编辑：
另一种尝试： http : //jsfiddle.net/4w06Lvms/

Answer 1

我做了一些类似于你想要的东西（全屏查看）。 您可以根据需要对其进行修改。 将指针移出屏幕以返回原始状态。

此外，使用比例制作动画效果更好，因为如果有多个图像，您可能不知道以像素为单位的确切高度和宽度，并且使用相同的比例值可以使您的代码统一。 希望能帮助到你。

 html,body{ margin:0; } .container{ background:yellow; display:flex; width:100vw; height:100vh; justify-content:center; transition: 0.5s ease; vertical-align:center; } .imageHover{ display:flex; height:300px; width:200px; transition: 0.5s ease; } img{ position:absolute; height:300px; width:200px; transition: 0.5s ease; } .container:hover > .imageHover{ height:100vh; background-color:black; width:100vw; transition: 0.5s ease; } .container:hover > .imageHover > img{ transform:translate(240%,50%) scale(1.6); transition: 0.5s ease; }

 <div class="container"> <div class="imageHover"> <img id="yo" src="https://picsum.photos/200/300 " alt=""> </div> </div>

Answer 2

您可以将图像的位置设置为固定，但是您需要知道图像的 x 和 y 位置的偏移量，然后才能启动动画。

在这种情况下，x 和 y 的偏移量为 30px，因为我已将父 div 填充设置为 30px。

当窗口向下或向右滚动时。 您必须重新计算图像的顶部和左侧值。 为此，您将需要 JS。

在将位置设置为固定之前，我已将顶部和左侧设置为偏移值。 然后图像开始在正确的位置移动。

在 photowipe 上，他们使用了 translate3d() 函数，他们也在使用 JS。 我不知道他们在做什么。

 #image { /* top and left offset */ top: 30px; left: 30px; width: 200px; height: 200px; transition: top 2s, left 2s, transform 2s; } #image:hover { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } #offset { background-color: beige; height: 1000px; /* given offset */ padding: 30px; }

 <div id="offset"> <img id="image" src="https://picsum.photos/200/300 " alt=""> </div>