<divclass="maincontainer"><divclass="thecard"><divclass="thefront">front of card</div><divclass="theback">back of card</div></div></div>
.maincontainer{position:relative;width:250px;height:350px;/*background: green;*/}.thecard{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:all0.5sease;/*background: yellow;*/}.thecard:hover{transform:rotateY(180deg);}.thefront{position:absolute;width:100%;height:100%;backface-visibility:hidden;background:#ffc728;color:#333;/* Styling up the card */text-align:center;font-family:sans-serif;border-radius:20px;font-size:1.2rem;font-weight:bold;}.theback{position:absolute;width:100%;height:100%;backface-visibility:hidden;background:#5fcf80;color:#fff;transform:rotateY(180deg);/* Styling up the card */text-align:center;font-family:sans-serif;border-radius:20px;font-size:1.2rem;font-weight:bold;}
Top comments (0)
Subscribe
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)