css3 实现翻转效果

类似于本站首页的logo hover效果

实现思路: 首先外层容器.flip 可以想象成一个硬币 里面有正反面 .flip 使用 transform-style: preserve-3d 让转换的子元素保留3D转换

正反面绝对定位 初始化时让.back翻转到背面 transform: rotateY(180deg) 硬币做好后给个hover效果让硬币翻转180度即可 如果正反两面的背景不是纯色的话要使用 backface-visibility: hidden 让背对我们的元素不可见

下面是代码

html

    <div class="flip">
        <div class="back">反</div>
        <div class="front">正</div>
    </div>

css

.flip {
    transition: 1.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    margin: 0 auto;
    .back,
    .front {
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: pink;
    }
    .back {
        transform: rotateY(180deg);
    }
    &:hover {
        transform: rotateY(180deg);
    }
}