Flip animace – otočení hoverem pro druhý „obsah“

HTML:

<div class="otoceni">
    <div class="predni">
        MůjSkript.cz
    </div>
    <div class="zadni">
        Veřejná sbírka
    </div>
</div>

CSS:

.otoceni {
    width: 500px;
    position: relative;
    
    -webkit-perspective: 500;
    -moz-transform-style: preserve-3d; 
    -moz-transprform: perspective(500px);
}
 
.otoceni > div {
    line-height: 100px;
    text-align: center;
    font-size: 80px;
    background: #0D6AB7;
    color: #fff;
    transition: all .5s;
    transform: rotateY(00deg);
}
 
.otoceni:hover > div {
    transform: rotateY(180deg);
}
 
.otoceni .predni {
    z-index: 1;
    position: relative;
}
 
.otoceni .zadni {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    background: red;
}
 
.otoceni:hover .zadni {
    transform: rotateY(0deg);
    z-index: 2;
}

Živá ukázka

Zdrojový kód

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.