Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Perspective on the scene container */ .scene { perspective: 800px; } /* 3D card flip */ .card-3d { width: 200px; height: 280px; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; } .scene:hover .card-3d { transform: rotateY(180deg); } .card-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .card-front { background: #1a73e8; color: #fff; } .card-back { background: #e53935; color: #fff; transform: rotateY(180deg); } /* Tilt on hover using rotateX/Y */ .tilt:hover { transform: perspective(600px) rotateX(8deg) rotateY(-8deg); }
Result
Open