6、利用 CSS3 构建记忆匹配游戏全解析

利用 CSS3 构建记忆匹配游戏全解析

1. CSS Transform 的使用

CSS transform 属性用于对目标 DOM 元素进行移动、缩放、旋转和倾斜等操作，其参数为函数，主要分为 2D 和 3D 两组函数。
- 2D 变换函数
- rotate(angle) ：根据给定的角度旋转元素，正角度为顺时针旋转，负角度为逆时针旋转。
- translate (tx, ty) ：根据给定的 X 和 Y 位移移动元素。
- translateX(number) 和 translateY(number) ：分别独立地在 X 轴和 Y 轴上进行位移。
- scale(sx, sy) ：根据给定的 sx 和 sy 向量缩放元素，如果只传递一个参数，则 sy 与 sx 值相同。
- scaleX(number) 和 scaleY(number) ：分别独立地在 X 轴和 Y 轴上进行缩放。
- 3D 变换函数
- rotate3d(x, y, z, angle) ：根据给定的 [x, y, z] 单位向量在 3D 空间中旋转元素。
- rotateX(angle) 、 rotateY(angle) 和 rotateZ(angle) ：分