پیشنمایش زنده
کد HTML
<div class="card-container">
<div class="card">
<div class="back">
<div class="red"></div>
<div class="text">NOU</div>
</div>
<div class="front">
<div class="red"></div>
<div class="text-center">
<svg viewBox="0 0 48 48">
<path
fill="#191f1f"
d="m 14.743552,27.197424 -1.439826,8.888133 c -0.03174,0.195936 0.11777,0.374416 0.316237,0.377509 l 9.360641,0.145882 1.344371,-1.179158 c 0.564803,-0.495394 0.539089,-1.356019 0.138635,-1.809376 l -0.917385,-1.038581 3.767647,-3.479011 c 3.109084,-2.870901 1.057476,-6.709966 0.770567,-6.996569 0.756364,1.018556 1.549631,1.587648 2.726324,0.463207 l 1.018375,-0.945401 1.436079,-8.944316 a 0.2950548,0.2950548 50.057903 0 0 -0.286204,-0.341785 l -9.366392,-0.162571 -1.255655,1.143726 c -0.463935,0.42258 -0.808482,1.236447 -0.243393,1.866828 l 0.943642,1.052673 -3.60197,3.194827 c -2.434455,2.115492 -2.358322,4.879113 -0.927458,7.357441 -1.098761,-1.90311 -2.23329,-1.355064 -3.784235,0.406542 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
transform="rotate(180,23.962004,23.841388)"
></path>
</svg>
</div>
<div class="text-top">
<svg viewBox="0 0 48 48">
<path
fill="#191f1f"
d="m 14.743552,27.197424 -1.439826,8.888133 c -0.03174,0.195936 0.11777,0.374416 0.316237,0.377509 l 9.360641,0.145882 1.344371,-1.179158 c 0.564803,-0.495394 0.539089,-1.356019 0.138635,-1.809376 l -0.917385,-1.038581 3.767647,-3.479011 c 3.109084,-2.870901 1.057476,-6.709966 0.770567,-6.996569 0.756364,1.018556 1.549631,1.587648 2.726324,0.463207 l 1.018375,-0.945401 1.436079,-8.944316 a 0.2950548,0.2950548 50.057903 0 0 -0.286204,-0.341785 l -9.366392,-0.162571 -1.255655,1.143726 c -0.463935,0.42258 -0.808482,1.236447 -0.243393,1.866828 l 0.943642,1.052673 -3.60197,3.194827 c -2.434455,2.115492 -2.358322,4.879113 -0.927458,7.357441 -1.098761,-1.90311 -2.23329,-1.355064 -3.784235,0.406542 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
transform="rotate(180,23.962004,23.841388)"
></path>
</svg>
</div>
<div class="text-bottom">
<svg viewBox="0 0 48 48">
<path
fill="#191f1f"
d="m 14.743552,27.197424 -1.439826,8.888133 c -0.03174,0.195936 0.11777,0.374416 0.316237,0.377509 l 9.360641,0.145882 1.344371,-1.179158 c 0.564803,-0.495394 0.539089,-1.356019 0.138635,-1.809376 l -0.917385,-1.038581 3.767647,-3.479011 c 3.109084,-2.870901 1.057476,-6.709966 0.770567,-6.996569 0.756364,1.018556 1.549631,1.587648 2.726324,0.463207 l 1.018375,-0.945401 1.436079,-8.944316 a 0.2950548,0.2950548 50.057903 0 0 -0.286204,-0.341785 l -9.366392,-0.162571 -1.255655,1.143726 c -0.463935,0.42258 -0.808482,1.236447 -0.243393,1.866828 l 0.943642,1.052673 -3.60197,3.194827 c -2.434455,2.115492 -2.358322,4.879113 -0.927458,7.357441 -1.098761,-1.90311 -2.23329,-1.355064 -3.784235,0.406542 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
></path>
<path
fill="#fffffd"
d="m 25.695312,15.503906 -4.234375,3.406249 c -1.206521,1.106493 -2.943121,3.745552 -0.311967,6.603761 0.05611,0.06095 0.153722,0.06567 0.216661,0.0118 l 7.454681,-6.381181 1.91767,2.327867 a 0.20414127,0.20414127 164.89444 0 0 0.359038,-0.09691 l 1.321929,-8.09898 a 0.22245666,0.22245666 49.630561 0 0 -0.219586,-0.258293 l -8.151173,0.0013 a 0.2092881,0.2092881 114.90739 0 0 -0.159876,0.344308 z"
transform="rotate(180,23.962004,23.841388)"
></path>
</svg>
</div>
</div>
</div>
</div>
کد CSS
.card-container {
perspective: 800px;
}
.card {
position: relative;
width: 210px;
height: 332px;
background: #fffffd;
border-radius: 1em;
box-shadow: 0 0 6px -4px black;
transition: 0.75s all;
transform-style: preserve-3d;
pointer-events: none;
user-select: none;
}
.card::before {
content: "";
position: absolute;
bottom: -24px;
bottom: 0;
left: 0;
width: 210px;
height: 110px;
transform: translate(0em, 60%) rotateX(90deg) scale(0.8);
border-radius: 100%;
background-color: #000a;
z-index: -10;
filter: blur(24px);
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
inset: 0.7em;
border-radius: 1.25em;
background: #191f1f;
overflow: hidden;
}
.red {
position: absolute;
background: #cb0323;
inset: 0;
border-radius: 100%;
transform-origin: center;
transform: scale(0.875) skewX(-22.5deg);
}
.back .text {
position: absolute;
font-size: 5em;
font-weight: 800;
color: #e4c713;
transform-origin: center;
transform: rotate(-15deg) translateX(5px);
text-shadow:
2px 2px #f1e8ad,
2px 1px #f1e8ad,
2px 0px #f1e8ad,
2px -1px #f1e8ad,
2px -2px #f1e8ad,
1px -2px #f1e8ad,
0px -2px #f1e8ad,
-1px -2px #f1e8ad,
-2px -2px #f1e8ad,
-2px -1px #f1e8ad,
-2px 0px #f1e8ad,
-2px 1px #f1e8ad,
-2px 2px #f1e8ad,
-12px 10px #191f1f,
-10px 10px #191f1f,
-9px 9.428571429px #191f1f,
-8px 8.857142857px #191f1f,
-7px 8.285714286px #191f1f,
-6px 7.714285714px #191f1f,
-5px 7.142857143px #191f1f,
-4px 6.571428572px #191f1f,
-3px 6px #191f1f,
-2px 5.428571429px #191f1f,
-1px 4.857142857px #191f1f,
0px 4.285714286px #191f1f,
1px 3.714285715px #191f1f,
2px 3.142857143px #191f1f,
3px 2.571428572px #191f1f,
4px 2px #191f1f,
4px -4px #191f1f,
-4px -4px #191f1f,
-5px -3px #191f1f,
-6px -2px #191f1f,
-7px -1px #191f1f,
-8px 0px #191f1f,
-9px 1px #191f1f,
-10px 2px #191f1f,
-11px 3px #191f1f,
-12px 4px #191f1f,
-14px 4px #fffffd,
-13px 3px #fffffd,
-12px 2px #fffffd,
-11px 1px #fffffd,
-10px 0px #fffffd,
-9px -1px #fffffd,
-8px -2px #fffffd,
-7px -3px #fffffd,
-6px -4px #fffffd,
-5px -5px #fffffd,
-4px -6px #fffffd,
-3px -6px #fffffd,
0px -6px #fffffd,
3px -6px #fffffd,
6px -6px #fffffd,
-14px 12px #fffffd,
-8px 12px #fffffd,
-7px 11.5px #fffffd,
-6px 11px #fffffd,
-5px 10.5px #fffffd,
-4px 10px #fffffd,
-3px 9.5px #fffffd,
-2px 9px #fffffd,
-1px 8.5px #fffffd,
0px 8px #fffffd,
1px 7.5px #fffffd,
2px 7px #fffffd,
3px 6.5px #fffffd,
4px 6px #fffffd,
5px 5.5px #fffffd,
6px 4px #fffffd;
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
inset: 0.7em;
border-radius: 1.25em;
background: #cb0323;
overflow: hidden;
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front .red {
border: 0.7em solid #fffffd;
transform: scale(0.92, 0.875) skewX(-22.5deg);
}
.text-center {
position: absolute;
width: 12em;
color: white;
}
.text-top {
position: absolute;
top: -1em;
left: -1.25em;
width: 7em;
color: white;
}
.text-bottom {
position: absolute;
bottom: -1em;
right: -1.5em;
width: 7em;
color: white;
}