演示效果

动画.gif

实现思路

先将两个盒子通过3D旋转180度实现背靠背定位，接下来给父盒子添加鼠标经过事件实现翻转效果。为了翻转过程显得优雅，对翻转过程添加了缓冲回弹效果。

代码

html结构

<!--
 * @Descripttion: 
 * @version: 
 * @Author: siebe
 * @Date: 2022-04-01 16:10:38
 * @LastEditors: siebe
 * @LastEditTime: 2022-04-01 16:11:52
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <div class="front">你好啊，西贝</div>
        <div class="back">点赞 关注 一键三连</div>
    </div>
</body>

</html>

css样式

* {
    margin: 0;
    padding: 0;
}

body {
    /* 页面垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2;
}

.box {
    /* 子元素绝对定位，父元素要相对定位才有用 */
    position: relative;
    width: 300px;
    height: 300px;
    cursor: pointer;
    /* 添加3d视角 */
    transform-style: preserve-3d;
    /* 添加动画效果 */
    animation: rotate-reverse 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.box:hover {
    /* transform: rotateY(180deg); */
    /* cubic-bezier(0.68, -0.55, 0.27, 1.55)缓冲回弹效果 */
    animation: rotate 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: pink;
    border-radius: 50%;
    line-height: 300px;
    text-align: center;
    font-size: 32px;
    color: #fff;
    /* 隐藏元素背面 */
    backface-visibility: hidden;
}

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

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

@keyframes rotate-reverse {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)