代码可直接复制使用看效果 这个文章参考了 Lazy.Cat 的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看,他讲的还是比较详细的。 我也觉得先来效果比较吸引人啊 这里就先记录一些比较关键的知识点,方便大家理解 1 .transform: transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。我们使用其rotateX,rotateY,translateZ来进行转动 2.transition: 用于设置过渡属性 transition: all .4s;//所有过程完成时间为.4s 3.animation 使用简写属性,将动画与 div 元素绑定 4.keyframes:从xx到xx状态 @keyframes animationname { keyframes-selector {css-styles; } } @keyframes 动画名 { from{ 初始状态 } to { 末态 } } 我们来看看其是怎么构成一个正方形的 /* 外层正方形 */ .set .out_front { /* 绕Y轴转动0度,向屏幕外偏移,离观察者近100px */ transform : rotateY(0deg) translateZ(100px) ; } .set .out