Сделаем анимацию переворачивания карточки
На первом шаге проведем некоторую подготовку.
Во-первых, задняя часть карты (.face.back) должна быть развернута на 180 градусов вокруг оси Y
Во-вторых, у каждой стороны (.back и .front) должна быть скрыта задняя часть.
Для элемента .card сразу добавим переход для свойства transition длительностью одну секунду.
Ну и не забудь про скрипт, для запуска перехода.
При нажатии на кнопку на передней части карточки - элементу .card нужно добавить класс flipped.
При нажатии на кнопку на задней части карточки - класс flipped нужно убрать у .card
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.
index.html
<!DOCTYPE>
<html>
<head>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
font-family: monospace;
}
.wrapper {
width: 200px;
height: 260px;
perspective: 600px;
}
h2 {
font-size: 24px;
color: #5E6572
}
p {
text-align: center;
color: white;
padding: 8px;
}
button {
background-color: #3454D1;
color: white;
border-radius: 16px;
padding: 8px 16px;
font-weight: bold;
border: none;
outline: none;
cursor: pointer;
}
.card {
width: 100%;
height: 100%;
position: relative;
}
.face {
height: 100%;
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.front {
background-color: #D5CAD6;
}
.back {
background-color: #6B5E62;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="face front">
<h2>Card One</h2>
<button>DETAILS</button>
</div>
<div class="face back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non sagittis justo. </p>
<button>BACK</button>
</div>
</div>
</div>
</body>
</html>