WEB前端教程：3D 空间的卡片翻转动效
掌握 CSS transform 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 代码结构清晰、规范
- 代码中含有必要的注释
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-31 10:48
- 阅读 ( 500 )
- 分类：WEB前端开发
