記錄--前端實現翻轉圖像

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

翻轉圖像是在視覺上比較兩個不同圖像的常用方法。單擊其中一個將翻轉它，並顯示另一個圖像。

佈局

佈局結構如下：

<div class="flipping-images">
    <div class="flipping-images__inner">
        <div class="flipping-images__side flipping-images__side--front">
            <!-- The image shown on the front -->
            <img class="flipping-images__img" src="..." />
        </div>

        <div class="flipping-images__side flipping-images__side--back">
            <!-- The image shown on the back -->
            <img class="flipping-images__img" src="..." />
        </div>
    </div>
</div>

它有正面和背面兩面，放置在內部容器內。我們希望它們彼此重疊。最好的方法是使用容器 relative 的樣式，並絕對定位它們。

.flipping-images__inner {
    /* Take full size of the root element */
    height: 100%;
    width: 100%;

    position: relative;
}

.flipping-images__side {
    /* Take full size of the inner container */
    height: 100%;
    width: 100%;

    /* Absolute position */
    position: absolute;
    top: 0;
    left: 0;
}

最初，正面顯示在背面的上部。用戶在單擊正面之前不會看到背面。這就是 z-index 該屬性派上用場的地方。

.flipping-images__side--back {
    z-index: 1;
}

.flipping-images__side--front {
    z-index: 2;
}

圖像必須適合其側面。在不顯式設置 width 和 height 屬性的情況下，我們可以使用 object-fit 屬性將圖像完美地放入每一側：

.flipping-images__img {
    /* Take the full height */
    height: 100%;

    /* But don't exceed the side's width */
    max-width: 100%;

    /* Fit within each side */
    object-fit: cover;
}

內部居中

我們希望在根元素的中心顯示內部容器。使用三個 CSS flexbox 屬性的組合將使我們能夠做到這一點：

.flipping-images {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

此外，我們還需要設置內容器的寬度。它必須與圖像的寬度相同。我們可以處理其中一個圖像 load 的事件，然後確定其寬度：

const handleLoad = (e) => {
    const imageEle = e.target;

    // Get the image's width
    const width = imageEle.getBoundingClientRect().width;

    // Assume `innerEle` represents the inner container
    innerEle.style.width = `${width}px`;
};


// Assume `containerEle` represents the root element
containerEle.querySelector('.flipping-images__img').addEventListener('load', handleLoad);

動畫

為了獲取您在本文開頭看到的動畫，我們需要在用戶單擊內部容器時旋轉它。我們創建了一個翻轉變體，將內部容器在垂直方向上旋轉 180 度：

.flipping-images__inner {
    transition: transform 800ms;
}


.flipping-images__inner--flip {
    transform: rotateY(180deg);
}

當用戶單擊內部容器時，我們會切換翻轉變體：

// Assume `innerEle` represents the inner container
innerEle.addEventListener('click', () => {
    innerEle.classList.toggle('flipping-images__inner--flip');
});

但是，結果是實際上只有第一個圖像被旋轉。背面的第二張圖像仍處於隱藏狀態。為了用背面替換正面，我們需要更多額外的樣式：

.flipping-images__inner {
    transform-style: preserve-3d;
}

.flipping-images__side {
    backface-visibility: hidden;
}

這兩個聲明都是必需的。否則，當正面旋轉時，無法看到背面。最後，由於我們旋轉了內部容器，導致背面也旋轉了。因此，我們必須反轉旋轉：

.flipping-images__side--back {
    transform: rotateY(-180deg);
}

3D動畫

到目前為止，圖像在內部容器內翻轉。這種 perspective 將使我們有能力使翻轉看起來像 3D 動畫。

.flipping-images {
    perspective: 1000px;
}

如果 perspective 的值是內部容器寬度的兩倍，則效果最佳。我們可以在上一節中提到的 load 事件處理程式中執行此操作：

const handleLoad = (e) => {
    const imageEle = e.target;

    // Get the image's width
    const width = imageEle.getBoundingClientRect().width;

    // Assume `containerEle` represents the root element
    containerEle.style.perspective = `${2 * width}px`;
};

水平翻轉

我們使用該 rotateY 函數在垂直方向上翻轉圖像。如果要將翻轉方向更改為水平，則可以使用該 rotateX 功能。

.flipping-images__inner--flip {
    transform: rotateX(180deg);
}

.flipping-images__side--back {
    transform: rotateX(-180deg);
}

本文轉載於:

https://juejin.cn/post/7325389178926743587

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。