html - 悬停时CSS3 RotateY完成

Question

这是我的代码：

#body #body3 #big .item {
    display: block;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -ms-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}

#body #body3 #big .item:hover {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
}

问题是当我将鼠标悬停在项目上时，它会旋转但当我离开鼠标时会立即恢复到原始状态。那么，即使我取消悬停，我怎样才能让它们完成 360 度旋转呢？