使用 @keyframes 规则 定义动画 , rotate 是动画的名称 , 该规则定义了动画的具体步骤 , 如果为 盒子模型 应用该动画 , 该 盒子模型 会 绕着 Y 轴旋转 360 度 ;...body {
/* 设置透视视图效果 */
perspective: 500px;
}
上述代码 告诉浏览器 , 观察者的眼睛 距离 投影平面...500 像素 , 在 这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ;
如果不设置 透视视图效果 , 那么 整个 三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样...6 个子盒子模型的效果
父容器中设置 相对定位 , 根据 子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ;
修改下 section 的属性 , 为其设置 transform:...X-UA-Compatible" content="ie=edge">
CSS3 3D 旋转木马示例
body {
/* 设置透视视图效果