css - CSS はどのように要素を一点から離すことができますか?

Question

Instagramの特殊効果をCSSでエミュレートしようとしています。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

In this case, you'll want to animate the left and top properties. The unfortunate piece of this is that you'll need to have one class/selector for each item you're planning to transition, along with a separate. You can then set transition: left 0.2s, top 0.2s; for the general selector. Just change the className of each to invoke the transition:

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

There is a downside to this, which is that some rendering engines don't actually hardware accelerate left/top transitions.