效果如图所示

CSS旋转效果
CSS旋转效果


思路如下:

  1. 将整个模型分成外、中、内三层
  2. 其中外负责监听hover事件,中负责旋转,内负责内容
  3. 整个的流程到这就很清晰了,外层container监听到hover事件后控制item进行旋转
  4. 稍微有点意思的应该就是内层page的实现了,算了,写作业去,就不多说,大家看代码吧。


代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS旋转效果</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*设置外中内三层div的大小一致*/
        .container, .item, .page {
            width: 320px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            font-size: 24px;
        }

        .item {
            /*设置中间层旋转时的动画效果*/
            transition: all .4s ease;
        }

        .page {
            /*配合旋转动画*/
            transition: .4s;
            background-color: goldenrod;
            box-shadow: 4px 2px 4px #999;
        }

        .front {
            opacity: 1;
        }

        .back {
            /*设置位置与正面重合*/
            position: absolute;
            top: 0;
            left: 0;
            /*设置透明 预先旋转180deg*/
            opacity: 0;
            transform: rotateY(180deg);
        }

        .container:hover .item{
            transform: rotateY(180deg);
        }

        .container:hover .front{
            opacity: 0;
        }

        .container:hover .back{
            opacity: 1;
        }
    </style>
    <link rel="manifest" href="./static/manifest.json" />
    <script src="./static/js/sw-server.js"></script>
</head>
<body>

<div class="container">
    <div class="item">
        <div class="page front">这是正面</div>
        <div class="page back">这是反面</div>
    </div>
</div>
</body>
</html>