CSS两面盒子翻转

CSS两面盒子翻转

首先在给一个大盒子里面包含两个盒子

<div class="box">
        <div class="front">好好学习</div>
        <div class="back">天天向上</div>
</div>

CSS

    body {
    /*设置元素被查看位置的视图,看着给合适的值*/
        perspective: 400px;
    }
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .3s;
        /*使被转换的子元素保留其 3D 转换*/
        transform-style: preserve-3d;
    }

    .box:hover {
    /*盒子以Y轴旋转180*/
        transform: rotateY(180deg);
    }

    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
    }

    .front {
        background-color: pink;
        z-index: 1;
    }

    .back {
        background-color: purple;
        /*盒子以Y轴旋转180*/
        transform: rotateY(180deg);
    }