如何在浏览器调整大小时平滑元素移动？ （css过渡）

Question

我正在构建一个响应式网站，并且有一个非常简单的图库，可以显示一组图像。在浏览器调整大小时，图像的堆栈顺序会发生变化，例如：

浏览器调整大小的

将是：

问题是这个过程突然发生但我希望它缓慢而顺畅。

每张图片都在.al-websites-image-cell DIV中，我试过这个：

.al-websites-image-cell,.al-websites-image-cell *{
        -webkit-transition: all 3.7s ease-out;
       -moz-transition: all 3.7s ease-out;
        -ms-transition: all 3.7s ease-out;
         -o-transition: all 3.7s ease-out;
            transition: all 3.7s ease-out;
}

但它没有用。这是HTML代码：

    <div class="al-dependent-website">
    <div style="text-align: center;">
        <div class="al-center" style="margin-top: 20px;">
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website1->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website1->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website1->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                <a href="<?php print $website->website2->url; ?>">
                    <div class="flipper">
                        <div class="al-front"><?php print $website->website2->frontImage; ?></div>
                        <div class="al-back"><?php print $website->website2->backImage; ?>  </div>
                    </div>
                </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website3->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website3->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website3->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website4->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website4->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website4->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website5->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website5->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website5->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website6->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website6->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website6->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website7->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website7->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website7->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website8->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website8->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website8->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell al-websites-empty-cell"></div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website9->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website9->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website9->backImage; ?>  </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell al-websites-empty-cell"></div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website10->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website10->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website10->backImage; ?> </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website11->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website11->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website11->backImage; ?> </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website12->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website12->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website12->backImage; ?> </div>
                        </div>
                    </a>
                </div>
                <div class="al-websites-cell al-websites-empty-cell"></div>
                <div class="al-websites-cell flip-container" ontouchstart="this.classList.toggle('hover');">
                    <a href="<?php print $website->website13->url; ?>">
                        <div class="flipper">
                            <div class="al-front"><?php print $website->website13->frontImage; ?></div>
                            <div class="al-back"><?php print $website->website13->backImage; ?> </div>
                        </div>
                    </a>
                </div>
        </div>
    </div>
</div>

它是css

.al-dependent-website{
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px 0;
}

.al-websites-cell{
    width: 195px;
    height: 140px;
    float: right;
}

.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container{
    display: inline-block;
    }

/* flip speed goes here */
.flipper {
    transition: 1.3s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.al-front, .al-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.al-front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.al-back {
    transform: rotateY(180deg);
}

fliper代码仅将正面图像翻转为背面图像。