CSS实现元素翻转效果

CSS实现元素翻转效果

元素翻转的效果能让用户有良好的体验感。
先看看效果：

CSS实现元素翻转的效果有两种思路
1、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，两个子元素同时翻转
2、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，控制父元素翻转

//两个子元素同时翻转的思路
<style>
    main{
            width: 300px;
            height: 500px;
            position: relative;
            perspective: 5000px;
        }
        .bg,.main{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            left: 0;
        }
        .bg{
            background-color: red;
            animation: flip1 3s linear;
            animation-fill-mode: forwards;
            backface-visibility: hidden;
        }
        .main{
            background-color: aqua;
            transform: rotateY(180deg);
            animation: flip2 3s 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);
            }
        }
</style>
<main>
    <div class="bg">1</div>
    <div class="main">2</div>
</main>

//仅父元素翻转的思路
<style>
       @keyframes flip{
            0%{
                -webkit-transform:   rotateY(0deg);
                transform:   rotateY(0deg);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            100%{
                -webkit-transform:   rotateY(180deg);
                transform:   rotateY(180deg);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
        }
        main{
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
            animation: flip 3s linear;
            transform-style: preserve-3d;
            animation-fill-mode: forwards;
        }
        .bg,.main{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
        }
        .bg{
            background-color: red;
        }
        .main{
            transform: rotateY(180deg);
            background-color: blue;
        }
</style>
<main>
    <div class="bg">1</div>
    <div class="main">2</div>
</main>

翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试，免得线上环境出现兼容问题。