一、3D 导航栏示例 - 核心要点
1、需求分析
实现如下功能 :
正面 和 底部 各有一个 盒子模型 , 鼠标移动到 正面 盒子模型 后 , 整个 盒子模型 的 父容器 绕 X 轴 旋转 90 度 ,...向上翻转 90 度 , 显示底部的 盒子模型 ;
2、HTML 结构
HTML 结构如下 , 两个导航菜单在 标签下的 标签 ;
显然 需要使用 左浮动 , 横向排列 ;...属性 , 该属性的 属性值 表示 观察者眼睛 ( 视点 ) 到 3D 转换元素 ( 盒子标签模型 ) 的距离 , 单位是像素 ;
body {
/* 设置透视视图效果..., 具体效果就是 " 近小远大 " ;
如果不设置 透视视图效果 , 那么 整个 三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样 ;
设置过渡动画
如果需要 为 3D 变换过程 设置过渡时间..." content="ie=edge">
3D 导航栏示例
body {
/* 设置透视效果 */
