一、3D 导航栏示例 - 核心要点
1、需求分析
实现下图的 旋转木马 效果 :
2、HTML 结构
HTML 标签结构很简单 , 只是一个 section 标签 , 内部包裹着 6 个 div 标签子盒子...6
section 标签
标签 是 HTML5 引入的 语意元素 , 表示一组独立的内容 , 这些内容 逻辑上...三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样 ;
设置 3D 呈现样式
盒子模型 的 父容器 和 子容器 都可以设置 3D 变换效果 , 如果要为 子容器 设置 3D 变换效果 , 则需要在....box 类型 的 样式 , 如果将 鼠标移动到 盒子模型上方时 , 会显示 .box:hover 样式 ;
该示例中 , 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 ;
设置 6...1.0,minimum-scale=1.0">
CSS3 3D 旋转木马示例