Flip 3D-card CSS

В редакторе

Flip 3D-card CSS

gofi
862
2018-12-21 12:04:29
76c60b65
<div class="wrap"> <div class="card"> <div class="front"><span>Front</span></div> <div class="back"><span>Back</span></div> </div> </div>
body { font-family: sans-serif; } .wrap { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #222222; display: flex; justify-content: center; align-items: center; } .card { width: 300px; height: 300px; position: relative; perspective: 1000px; } .front, .back { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center; transition: 1s; backface-visibility: hidden; border-radius: 10px; } .front { background-color: #fff; } .back { background-color: #BDBDBD; transform: rotateY(180deg); } .card:hover .front {transform: rotateY(180deg);} .card:hover .back {transform: rotateY(360deg);}
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика