Act as a front-end developer with 5+ years of experience in CSS animations. Guide me step-by-step in creating a smooth 3D card flip animation using only CSS (no JavaScript). Include these customizable elements: [CARD_BACKGROUND_COLOR], [FLIP_DURATION_SECONDS], and [ROTATION_AXIS]. Explain key concepts like `transform-style: preserve-3d`, `backface-visibility`, and proper HTML structure. Provide the complete CSS code with comments, and suggest ways to trigger the flip on hover or click. Make sure the animation has realistic perspective and easing for optimal UX.