css两张图片翻转切换动画

<div id="dataButton" class="button" onclick="clickFn3('data','data2')"></div>
        <div id="data">
            <div id="dataPic">
                <img src="" width="100%" height="100%">//图一
            </div>
            <div id="dataPic2">
                <img src="" width="100%" height="100%">//图二
            </div>
        </div>
        <div id="data2">
            <div id="dataPic1">
                <img src="" width="100%" height="100%">//图一
            </div>
            <div id="dataPic21">
                <img src="" width="100%" height="100%">//图二
            </div>
        </div>

#dataButton{
    width: 45px;
    height: 24px;
    top: 409px;
    left: 1293px;
}

#data{
    width: 643px;
    height: 269px;
    position: absolute;
    top: 449px;
    left: 694px;
    display: none;
    z-index: 11;
}

#data2{
    width: 643px;
    height: 269px;
    position: absolute;
    top: 449px;
    left: 694px;
    display: none;
    z-index: 11;
}


#dataPic{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transform: rotateY(180deg);
    animation: flip2 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
}

#dataPic2 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    animation: flip1 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

#dataPic1,
#dataPic21 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

#dataPic21 {
    animation: flip3 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

#dataPic1 {
    transform: rotateY(180deg);
    animation: flip4 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

function clickFn(target,target2) {
    target = document.getElementById(target);
    target2 = document.getElementById(target2);
    var display = target.style.display;
    if(display != 'block') {
        target.style.display = 'block';
        target2.style.display = 'none';
    }else{
        target.style.display = 'none';
        target2.style.display = 'block';
    }
}

代码参照：CSS实现元素翻转效果_css翻转_I'm Mr.C的博客-CSDN博客

div翻转：

 

<div id="main">
        <div class="bg">1</div>
        <div class="main">2</div>
    </div>
    <div id="main1">
        <div class="bg1">1</div>
        <div class="main1">2</div>
    </div>

#main{
    width: 100px;
    height: 100px;
    position: relative;
    perspective: 5000px;
}

.bg,.main{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    left: 0;
}

.bg{
    background-color: red;
    animation: flip1 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}
.main{
    background-color: aqua;
    transform: rotateY(180deg);
    animation: flip2 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

@keyframes flip1{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(180deg);
    }
}
@keyframes flip2{
    0%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}


#main1{
    width: 100px;
    height: 100px;
    position: relative;
    perspective: 5000px;
}

.bg1,.main1{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    left: 0;
}

.bg1{
    background-color: red;
    animation: flip3 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

.main1{
    background-color: aqua;
    transform: rotateY(180deg);
    animation: flip4 2s linear;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

@keyframes flip3{
    0%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
@keyframes flip4{
    0%{
        transform: rotateY(360deg);
    }
    100%{
        transform: rotateY(180deg);
    }
}

注意flip1、2、3、4放的位置