鼠标悬停查看翻转效果。核心三要素：perspective(透视)、transform-style(保留3D空间)、backface-visibility(隐藏背面)
请缩放浏览器窗口，观察下方盒子的变化：
- 宽度 >= 1200px：4列，黄色
- 992px < 宽度 < 1200px：4列，蓝色
- 576px < 宽度 <= 992px：2列，绿色
- 宽度 <= 576px：1列，红色
- 手机横屏：4列，小尺寸
✅ CSS 3D 变换核心：
perspective: 1000px; 给父元素添加，定义观察者与Z平面的距离，值越小3D效果越明显transform-style: preserve-3d; 让子元素在3D空间中渲染，而不是扁平化backface-visibility: hidden; 元素旋转到背面时隐藏，常用于翻转效果translateX/Y/Z()、rotateX/Y/Z()、scale3d()✅ 响应式媒体查询核心：
<head> 中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">1200px(大屏)、992px(平板)、768px(小平板)、576px(手机)