body{font-family:sans-serif}.wrap{position:absolute;width:100%;height:100%;left:0;top:0;background-color:#e1e8ed;display:flex;justify-content:center;align-items:center}.card{width:300px;height:300px;position:relative;perspective:1000px}.card:hover .front{transform:rotateY(180deg)}.card:hover .back{transform:rotateY(360deg)}.front,.back{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;transition:transform 1s cubic-bezier(.175,.885,.32,1.275);backface-visibility:hidden;border-radius:10px;box-shadow:0 0 20px #ced9e0;font-size:2em}.front{background-color:#fff}.back{background-color:#ff7373;transform:rotateY(180deg)}