css - CSS如何将元素从一个点翻译出来？

Question

我正在尝试用 CSS 模拟 Instagram 的特殊效果。在 Instagram 中，点击一组照片会使每张照片长大并飞离原来的位置。

目前，我只知道如何做成长部分。我不知道如何使它们translate从原始点开始。

HTML

<div id="photoSet">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
</div>

CSS

@-moz-keyframes fly {
    from {
       -moz-transform: scale(0.5);
    }
    to {
       -moz-transform: scale(1.0);
    }
}

img {
   -moz-animation: fly 1s;
}

Answer 1

在这种情况下，您需要为left和top属性设置动画。不幸的是，您需要为您计划转换的每个项目拥有一个类/选择器，以及一个单独的。然后您可以设置transition: left 0.2s, top 0.2s;为通用选择器。只需更改每个的 className 即可调用转换：

.photo { 
  transition: left 0.2s, top 0.2s;
  position: absolute;
  left: 0;
  top: 0;
}
.photo.photo1 { left: 0; top: 0; }
.photo.photo2 { left: 50px; top: 0; }
.photo.photo3 { left: 100px; top: 0; }
/* etc */
.photo.photo6 { left: 100px; top: 50px; }

这样做有一个缺点，那就是一些渲染引擎实际上并没有硬件加速左/上转换。