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

有一個缺點這一點，這是一些渲染引擎不實際上硬件加速左/上轉變。