Javascript 如何制作斯坦福大学专业网页上的动画？

我不知道这些东西是否叫做动画，但当你点击“专业”时，我怎么能做出那个旋转的东西呢

---

我假设我需要使用CSS网格和JS。

它们被称为翻转卡。下面是一个示例和教程：

身体{ 字体系列：Arial、Helvetica、无衬线字体； } .翻盖卡片{ 背景色：透明； 宽度：300px； 高度：300px； 透视图：1000px； } .翻转卡内部{ 位置：相对位置； 宽度：100%； 身高：100%； 文本对齐：居中； 转变：转变0.6s； 变换样式：保留-3d； 盒影：0 4px 8px 0 rgba0,0,0,0.2； } .翻转卡：悬停。翻转卡内部{ 变换：旋转180度； } .正面翻转卡片，.背面翻转卡片{ 位置：绝对位置； 宽度：100%； 身高：100%； 背面可见性：隐藏； } .翻转卡正面{ 背景色：bbb； 颜色：黑色； } .把卡片翻回去{ 背景色：2980b9； 颜色：白色； 变换：旋转180度； } 用文字翻转卡片 将鼠标悬停在下图上： 航空航天 为您提供在航空航天和相关工程系统的概念、设计、实施和操作方面取得成功和领导地位所必需的原则和技术

---

为了在点击时获得翻转，请遵循以下代码

var card=document.querySelector'.card'； card.addEventListener“单击”功能{ card.classList.toggle'is-fliped'； }; 身体{ 字体系列：无衬线； } .现场{ 宽度：200px； 高度：260px； 边框：1px实心CCC； 利润率：40px0； 透视图：600px； } .卡片{ 位置：相对位置； 宽度：100%； 身高：100%； 光标：指针； 变换样式：保留-3d； 变换原点：中间偏右； 转变：转变1s； } .卡片翻了{ 变换：translateX-100%旋转-180度； } .card___面{ 位置：绝对位置； 宽度：100%； 身高：100%； 线高：260px； 颜色：白色； 文本对齐：居中； 字体大小：粗体； 字体大小：40px； 背面可见性：隐藏； } .正面卡{ 背景：d96a51； } .card___面对面{ 背景：5ce3； 变换：旋转180度； } 正面 返回

---

单击卡片翻转。

您至少可以尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试了什么。