روش ساخت فلیپ باکس (flipbox) ساده فقط با html و css

نحوه ساخت فلیپ باکس فقط با html و cssخب خیلیا دوست دارن یا بعضی وقتا واقعا نیاز دارن کد 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); } https://virgool.io/p/baj5vnxjxqqo/.flip-card-sajjeo%7Bbackground-color:transparent;width:300px;height:300px;perspective:1000px;display:block;margin:auto;border-radius:10px;%7D.flip-card-inner-sajjeo%7Bposition:relative;width:100%;height:100%;text-align:center;transition:transform0.6s;transform-style:preserve-3d;box-shadow:04px8px0rgba(0,0,0,0.2);border-radius:10px;%7D.flip-card-sajjeo:hover.flip-card-inner-sajjeo%7Btransform:rotateY(180deg);%7D.flip-card-front-sajjeo,.flip-card-back-sajjeo%7Bposition:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;%7D.flip-card-front-sajjeo%7Bbackground-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:0px4px10pxrgba(0,0,0,1);} حرف آخرالبته کاملا مشخصه این روزها اینقدر پلاگین و اینها هستش که نیازی نیست شما html و css خام بزنید برای یه flipbox ساده! اما دونستنش و لاجیکش همیشه کمک میکنه بهتر متوجه بشید.اگه جایی سوال داشتید کامنت بذارید سریع جواب میدم بهتون.