使用CSS3实现3D翻面

body{
            background-color: #FFC0CB;
        }
        .box{
            width: 200px;
            height: 200px;
            /*border: 1px solid #000000;*/
            margin: 100px auto;
            position: relative;
        }
        .box::after,.box::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: pink;
            background: url(自己选背景图) no-repeat left top;
            transition: all 1s;
            backface-visibility: hidden;
        }
        .box::before{
            transform: rotateY(-180deg);
        }
        .box::after{
            left: 300px;
            background-position: right top; 
        }
        .box:hover::before{
            transform: rotateY(0deg);
        }
        .box:hover::after{
            transform: rotateY(180deg)
        }

 

<div class="box">
        
    </div>

                               本文属于学习笔记，不做商业用途