当前位置: 海之晶网站设计> 建站知识> 常见问题>魔术卡片:解决常见的尺寸问题

魔术卡片:解决常见的尺寸问题

文章出处:网站建设-海之晶网络 | 网站编辑:网站设计 | 发表时间:2020/8/5 21:05:23
分享:

你的下一个客户在介绍他们的项目时使用交互式这个词的机会有多大?根据我的经验,答案是100%,所以我一直在寻找强大的CSS技术,以帮助我实现讨论这个目标时出现的各种功能和效果。

我被要求反复实现的一个小互动就是翻牌—悬停或点击以显示其背面内容时翻转的内容块。这是一个整洁的效果,鼓励有趣的浏览,以及另一种方式来显示更多的信息,而不需要离开页面。但是,标准方法在适应不同卡片内容长度时有一个问题。

在本教程中,我们将构建一个翻页卡片网格,通过一些CSS基础知识(变换、flex和grid)来解决这个问题。您需要熟悉这些,这将有助于更好地掌握CSS定位技术。我们将介绍:

拥有对三维转换的良好现代浏览器支持,创建一个基本的翻页卡相对简单。通常的方法是将前面和后面的卡片面放在父容器中,并且绝对地定位背面,以便它能够与前面的大小相匹配。在背面添加一个x轴变换使其看起来颠倒,在悬停状态下给卡片本身添加另一个变换,我们就可以做生意了

关键字:
南京市汉中路1号国际金融中心9楼
建站热线:13276617532
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。