3D 空间的卡片翻转动效

课程目标

• 掌握 CSS transform 3D 变形
• 使用 CSS 伪元素触发过渡效果
• 熟悉 CSS transform 各项子属性

阅读

• CSS3 新特性兼容方法总结 (opens new window)
• CSS3 3D transform 详解 (opens new window)
• CSS Transforms 3D (opens new window)
• CSS3 过渡 (opens new window)
• CSS3 变形 (opens new window)
• CSS Transforms Module (opens new window)
• CSS3 中的变形 transform 详解 (opens new window)
• codepen 优秀动画示例 (opens new window)

编码

根据动效 demo (opens new window)中的效果 、通过 CSS 实现一个卡片翻转的效果。 动效 demo 下载设计稿图片资源 (opens new window)

要求

• 注意不同浏览器中的兼容性
• 请注意代码风格的整齐、优雅
• HTML 及 CSS 代码结构清晰、规范
• 代码中含有必要的注释