css3怎样实现翻转2次效果-猿码集

1. 引言

在网页设计中，翻转效果是一种非常常见的设计。通常我们可以通过CSS3中的transform属性和transition属性来实现翻转效果。而在这篇文章中，我将会教大家如何实现翻转2次效果。

2. HTML结构

在实现倒转2次效果之前，首先需要先了解HTML结构，具体结构如下所示：


<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <!-- 此处放置正面内容 -->
        </div>
        <div class="back">
            <!-- 此处放置背面内容 -->
        </div>
    </div>
</div>

其中flip-container、flipper、front、back均为class属性，这里使用class是为了通过CSS样式调节翻转效果的一些参数，具体方法后续会讲到。

3. 基本翻转效果

3.1 使用transform属性实现基本翻转效果

要实现基本的翻转效果，我们需要使用到CSS3中的transform属性。具体实现方法如下所示：


.flip-container {
    perspective: 1000px;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
}
.flipper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.6s ease-out;  // 0.6s为翻转时间，可根据需要自行调节
}
.front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

首先，我们在flip-container元素中设置perspective属性，这个属性是用来创建3D效果的，值越大，3D效果越明显，一般设置1000px即可。接着我们设置flipper元素的position属性为absolute，这是因为我们需要让flipper元素在flip-container元素内部保持绝对定位，而不是整个页面。接着设置flipper元素的transform-style属性为preserve-3d，这个属性是用来告诉浏览器该元素包含3D元素，从而让后续的transform属性生效。最后设置transition属性，这个属性是用来实现翻转效果，all表示所有属性都进行过渡效果，0.6s表示过渡时间，ease-out表示过渡效果为缓出效果。接着，我们将front元素和back元素均设置为绝对定位，并设置其宽度和高度均为100%，这是为了让其填满flip-container元素。backface-visibility属性是用来设置元素背面是否可见，设置为hidden即可让元素背面不可见。最后，我们设置flip-container元素的:hover效果，当鼠标悬停在flip-container元素之上时触发，这个时候我们将其对应的flipper元素进行翻转，即transform: rotateY(180deg)。

3.2 实现基本翻转效果

将以上代码复制到HTML和CSS文件里并保存后，打开浏览器，就可以看到实现的基本翻转效果了。

4. 翻转2次效果

4.1 基本步骤

在上一小节我们学习了如何实现基本的翻转效果，而要实现翻转2次效果，并不是一件容易的事情，需要我们按照以下步骤进行操作。

将flip-container元素拆分成两个不同的部分

使用CSS3中的animation属性来实现第一次翻转效果

再次拆分flip-container元素，实现第二次翻转效果

最后合并两个部分，完成翻转2次的效果

4.2 实现步骤

4.2.1 将flip-container元素拆分成两个不同的部分

在第一步中，我们需要将flip-container元素拆分成两个不同的部分，分别为flipper1和flipper2。代码如下所示：


.flip-container {
    perspective: 1000px;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
}
.flipper1 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: flip 0.6s forwards;  // 使用动画实现第一次翻转
}
.flipper2 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    animation: flip2 0.6s forwards;  // 使用动画实现第二次翻转
}
.front1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}
.front2 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    display: none;
}
.back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
@keyframes flip {
    /* 第一次翻转动画 */
}
@keyframes flip2 {
    /* 第二次翻转动画 */
}

在这里我们新增了两个flipper元素，分别为flipper1和flipper2。同样，我们在两个flipper元素中均新增了front和back元素。此时我们打开浏览器并查看，会发现我们的页面已经出现了两个翻转的容器。

4.2.2 使用CSS3中的animation属性来实现第一次翻转效果

在第二步中，我们需要使用CSS3中的animation属性来实现第一次翻转效果。我们可以通过下面的代码实现第一次翻转：


@keyframes flip {
    0% {
        transform: rotate3d(1,0,0,90deg);
    }
    100% {
        transform: rotate3d(1,0,0,0deg);
    }
}

在这里，我们使用了@keyframes关键字来定义一个名为flip的动画。其中0%表示动画开始的状态，100%表示动画结束的状态。在开始状态下，我们使用了transform: rotate3d(1,0,0,90deg)来将flipper1元素绕X轴旋转了90度，使其处于背面状态。而在结束状态下，我们使用transform: rotate3d(1,0,0,0deg)来将flipper1元素回到了正面状态。通过这样的动画操作，我们就成功实现了第一次翻转效果。

4.2.3 再次拆分flip-container元素，实现第二次翻转效果

在第三步中，我们需要再次拆分flip-container元素，同时对其进行第二次翻转。具体代码如下：


@keyframes flip2 {
    0% {
        transform: rotateY(-180deg);
    }
    25% {
        transform: rotateY(-270deg);
    }
    50% {
        transform: rotateY(-90deg);
    }
    75% {
        transform: rotateY(-270deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

在这里我们同样使用了@keyframes关键字来定义了名为flip2的动画。不同于第一次翻转，这里我们使用了rotateY函数，并且在25%和75%的时候进行了多次旋转操作，除此之外，这个动画的实现并没有什么技术难点，建议大家自己调试一下以达到最佳效果。

4.2.4 最后合并两个部分，完成翻转2次的效果

在第四步中，我们需要将两个部分合并起来，并设置js操作来实现翻转2次效果。具体代码如下：


var flipper1 = document.querySelector('.flipper1');
var flipper2 = document.querySelector('.flipper2');
flipper1.addEventListener("animationend", function() {
    flipper1.style.display = "none";
    flipper2.style.display = "block";
});
flipper2.addEventListener("animationend", function() {
    flipper1.style.display = "block";
    flipper2.style.display = "none";
});

在这里我们通过JS操作来模拟了翻转2次的效果。首先我们通过querySelector获取了flipper1和flipper2元素，并且为其添加了animationend事件。当flipper1元素动画播放结束后，我们隐藏其显示，并显示flipper2元素。同样的，当flipper2元素动画播放结束后，我们隐藏其显示，并显示flipper1元素，从而形成了翻转2次的效果。

5. 总结

通过以上的学习，我们了解到了如何使用CSS3中的transform属性和transition属性来实现基本的翻转效果，并且进一步学习了如何使用CSS3中的animation属性来实现翻转2次效果。通过这个例子，我们既学习到了CSS3中的基本知识，也学习到了JS操作动画的方法，这对于我们的网页设计工作具有非常重要的意义。

css3怎样实现翻转2次效果