|
|
|
@ -29,7 +29,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
.flip-card {
|
|
|
|
.flip-card {
|
|
|
|
width: 300px;
|
|
|
|
width: 300px;
|
|
|
|
height: 600px;
|
|
|
|
height: 300px;
|
|
|
|
|
|
|
|
perspective: 800px;
|
|
|
|
|
|
|
|
margin: 100px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flip-card img {
|
|
|
|
.flip-card img {
|
|
|
|
@ -50,7 +52,26 @@
|
|
|
|
.flip-card:hover .filp-card-inner {
|
|
|
|
.flip-card:hover .filp-card-inner {
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.flip-card-front,
|
|
|
|
|
|
|
|
.flip-card-back {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.flip-card-back {
|
|
|
|
|
|
|
|
background-color: lightblue;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- notes
|
|
|
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
|
|
|
این گزینه را برای ایجاد عمق ایجاد میشود
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
|
