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; }

这有一个缺点，就是有些渲染引擎实际硬件没有加速左/上过渡。