Я пытался создать откидную карточку, передний класс работает правильно, но я не знаю, почему задний класс не появляется, зачем задавать свойство преобразования на карточке? !!!
HTMLКод: -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flip Card</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card">
<div class="front">This is front</div>
<div class="back">This is back</div>
</div>
</body>
</html>
SASS код: -
*
margin: 0
padding: 0
box-sizing: border-box
цвет фона корпуса: # f1f2f3 в перспективе: 500px
.card
width: 200px
height: 300px
border: 1px solid #666
background-color: #eee
border-radius: 5px
position: relative
margin: 50px auto
overflow: hidden
transition: all 1s ease-in-out
transform-style: preserve-3d
&:hover
transform: rotateY(180deg)
div
position: absolute
top: 0
left: 0
width: 100%
height: 100%
padding: 25px 0
text-align: center
.front
z-index: 2
background-color: #fff
color: #000
backface-visibility: hidden
.back
z-index: 1
background-color: #000
color: #fff
backface-visibility: hidden
transform: rotateY(180deg)