纯css实现网页元素两面翻转效果。鼠标经过盒子，盒子两面翻转效果

tanzhongfa2

[HTML] 纯文本查看 复制代码

以下是css的源码
* {
            padding: 0;
            margin: 0;

        }

        body {
            perspective: 300px;
        }

        .box {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 100px auto;

            transform-style: preserve-3d;
            transition: all 0.4s;
        }

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

        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(1px);
        }

        .back {
            background-color: aqua;
            transform: rotateY(180deg);

        }

        .box:hover {
            transform: rotateY(180deg);
        }
以下是html中的源码
<div class="box">
        <div class="front">我是刘德华</div>
        <div class="back">我很帅</div>
    </div>

WaveH

有点意思，效果是中间一个圆，正反两面可以翻转