خب خیلیا دوست دارن یا بعضی وقتا واقعا نیاز دارن کد html و css رو بزنن و یه سکشنی رو بسازن.

توی این مطلب روش ساخت خیلی ساده با html و css رو میگم که خیلی راحت فلیپ باکس رو بسازین.

خب بدون فوت وقت میرم سروقت ساختنش.

اولین کار اینه که HTML و ساختارشو بسازیم.

کد HTML رو من به صورت زیر نوشتم:

<div class=&quotflip-card-sajjeo&quot>
  <div class=&quotflip-card-inner-sajjeo&quot>
    <div class=&quotflip-card-front-sajjeo&quot>
 
      <img src=&quothttps://sajjeo.com/wp-content/uploads/2020/12/DHRM1084-640x640.jpg&quot alt=&quotsajjad-azizzadeh&quot style=&quotwidth:300px;height:300px;filter: grayscale(1);&quot>
<h1 class=&quoth1-flipcard-sajjeo&quot style=&quot
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
    /* backdrop-filter: blur(4px); */
&quot>سجاد هستم و این یه فلیپ کارت هستش</h1>
    </div>
    <div class=&quotflip-card-back-sajjeo&quot>
      <h1>سجاد عزیززاده</h1> 
      <p>اینجا یه المان پاراگراف گذاشتم</p> 
      <p>سایت من : sajjeo.com</p>
    </div>
  </div>
</div>
 

و CSS رو هم به صورت زیر نوشتم:

.flip-card-sajjeo {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  display: block;
  margin: auto;
  border-radius: 10px;
}

.flip-card-inner-sajjeo {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

.flip-card-sajjeo:hover .flip-card-inner-sajjeo {
  transform: rotateY(180deg);
}

.flip-card-front-sajjeo, .flip-card-back-sajjeo {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front-sajjeo {
  background-color: #bbb;
  color: black;
  border-radius: 10px;
  overflow: hidden;
}

.flip-card-back-sajjeo {
  background-color: #eff5fa;
  color: black;
  transform: rotateY(180deg);
  border-radius: 10px;
}

h1 {
  padding-top:20px;
}

.h1-flipcard-sajjeo {
  position: absolute;
  /* width: 100%; */
  /* height: 100%; */
  /* backdrop-filter: blur(4px); */
  color: white;
  bottom: 2%;
  text-shadow: 0px 4px 10px rgba(0,0,0,1);
}

حرف آخر

البته کاملا مشخصه این روزها اینقدر پلاگین و اینها هستش که نیازی نیست شما html و css خام بزنید برای یه flipbox ساده! اما دونستنش و لاجیکش همیشه کمک میکنه بهتر متوجه بشید.

اگه جایی سوال داشتید کامنت بذارید سریع جواب میدم بهتون.