首页 前端知识 【CSS3】CSS3 3D 转换示例 - 3D 导航栏示例 ( 列表设置 | 透视视图 | 过渡动画 | 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型的效果 )

【CSS3】CSS3 3D 转换示例 - 3D 导航栏示例 ( 列表设置 | 透视视图 | 过渡动画 | 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型的效果 )

2024-04-29 12:04:47 前端知识 前端哥 197 145 我要收藏

文章目录

  • 一、3D 导航栏示例 - 核心要点
    • 1、需求分析
    • 2、HTML 结构
    • 3、CSS 样式
      • 列表设置
      • 开启透视视图
      • 设置过渡动画
      • 设置 3D 呈现样式
      • 鼠标移动到控件上方效果
      • 设置两个子盒子模型的效果
  • 二、完整代码示例
    • 1、代码示例
    • 2、展示效果





一、3D 导航栏示例 - 核心要点



1、需求分析


实现如下功能 :

在这里插入图片描述

正面 和 底部 各有一个 盒子模型 , 鼠标移动到 正面 盒子模型 后 , 整个 盒子模型 的 父容器 绕 X 轴 旋转 90 度 , 向上翻转 90 度 , 显示底部的 盒子模型 ;


2、HTML 结构


HTML 结构如下 , 两个导航菜单在 <ul> 标签下的 <li> 标签 ;

显然 <li> 需要使用 左浮动 , 横向排列 ;

<body>
    <ul>
        <li>
            <div class="box">
                <div>正面1</div>
                <div>底面1</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>正面2</div>
                <div>底面2</div>
            </div>
        </li>
    </ul>
</body>

3、CSS 样式


列表设置

ul 下的 li 列表 需要设置 浮动效果 , 才能从左到右排列 ;

默认状态下 ul 下的 li 列表 每个列表项前面都有一个小圆点 , 需要使用 list-style: none 属性设置 , 取消 列表样式 ;

        ul li {
            /* 设置浮动效果 , 从左到右排列 */
            float: left;
            /* 取消列表样式 , 前面有一个小圆点 */
            list-style: none;
        }

开启透视视图

HTML 页面 呈现 3D 效果 , 需要 设置 3D 空间中的透视效果 属性 , 该属性的 属性值 表示 观察者眼睛 ( 视点 ) 到 3D 转换元素 ( 盒子标签模型 ) 的距离 , 单位是像素 ;

        body {
            /* 设置透视视图效果 */
            perspective: 500px;
        }

上述代码 告诉浏览器 , 观察者的眼睛 距离 投影平面 500 像素 , 在 这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ;

如果不设置 透视视图效果 , 那么 整个 三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样 ;

设置过渡动画

如果需要 为 3D 变换过程 设置过渡时间 , 只需要 在 父盒子 中设置 transition 属性即可 , transition 属性 设置 盒子模型 属性值变化时的过渡效果 ;

            /* 设置过渡动画 */
            transition: all 0.5s;

上述代码 告诉浏览器 该 盒子模型 及 子盒子模型 所有 可过渡 的属性值在 0.5 秒内平滑地改变 ;

设置 3D 呈现样式

盒子模型 的 父容器 和 子容器 都可以设置 3D 变换效果 , 如果要为 子容器 设置 3D 变换效果 , 则需要在 父容器 的 盒子模型 样式中 设置 transform-style: preserve-3d; 属性 ,

            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;

上述代码 告诉 浏览器 子容器盒子模型 保留其的 3D 变换效果 , 即 子盒子模型 的 3D 效果 是 相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ;

鼠标移动到控件上方效果

:hover 是一个 伪类选择器 , 该选择器 表示 用户与页面进行交互的一种状态 , 即 鼠标指针停留在 盒子模型 上方时的一种状态 ;

        .box:hover {
            /* 鼠标移动到父盒子处 绕 X 轴旋转 , 正面躺下 */
            transform: rotateX(90deg);
        }

默认状态下 , .box 类型的盒子 显示的是 .box 类型 的 样式 , 如果将 鼠标移动到 盒子模型上方时 , 会显示 .box:hover 样式 ;

设置两个子盒子模型的效果

父容器中设置 相对定位 , 根据 子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ;

第一个子容器 显示在正面 , 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 , 这样将整个 父盒子 进行 旋转时 , 旋转中心 恰好 是 中心位置 ;

第二个子容器 显示在底部 , 此时需要 绕 X 轴旋转 -90 度 ( 根据右手法则计算 ) , 正面向前扑倒 , 这样正面的字会显示在底部 ;

        .box div:first-child {
            /* 第一个子盒子 正常显示在正面 */
            background-color: red;
            /* 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 */
            transform: translateZ(50px);
        }
        
        .box div:last-child {
            /* 第二个子盒子 绕 X 轴旋转 -90 度 , 
               正面向前扑倒 , 正面的字显示在底部
               注意 : 先移动 后旋转 */
            transform: translateY(50px) rotateX(-90deg);
            background-color: blue;
        }




二、完整代码示例



1、代码示例


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D 导航栏示例</title>
    <style>
        body {
            /* 设置透视效果 */
            perspective: 500px;
        }
        
        ul {
            /* 上下 100 像素间距 , 左右居中 */
            margin: 100px auto;
        }
        
        ul li {
            /* 设置浮动效果 , 从左到右排列 */
            float: left;
            /* 上下 0 像素间距 , 左右 5 像素间距 */
            margin: 0 5px;
            /* 宽度 200 像素 , 高度 100 像素 */
            width: 200px;
            height: 100px;
            /* 取消列表样式 , 前面有一个小圆点 */
            list-style: none;
        }
        
        .box {
            /* 子绝父相 该父容器 相对定位 , 子容器 绝对定位 */
            position: relative;
            /* 宽度 和 高度 占父容器 100% */
            width: 100%;
            height: 100%;
            /* 设置过渡动画 */
            transition: all 0.5s;
            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            /* 鼠标移动到父盒子处 绕 X 轴旋转 , 正面躺下 */
            transform: rotateX(90deg);
        }
        
        .box div {
            /* 使用绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 设置文字大小 */
            font-size: 30px;
            /* 设置文字颜色 */
            color: #fff;
            /* 设置文字在盒子中水平对齐 */
            text-align: center;
            /* 设置文字在盒子中垂直对齐 */
            line-height: 100px;
        }
        
        .box div:first-child {
            /* 第一个子盒子 正常显示在正面 */
            background-color: red;
            /* 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 */
            transform: translateZ(50px);
        }
        
        .box div:last-child {
            /* 第二个子盒子 绕 X 轴旋转 -90 度 , 
               正面向前扑倒 , 正面的字显示在底部
               注意 : 先移动 后旋转 */
            transform: translateY(50px) rotateX(-90deg);
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div>正面1</div>
                <div>底面1</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>正面2</div>
                <div>底面2</div>
            </div>
        </li>
    </ul>

</body>

</html>

2、展示效果


默认状态如下 :

在这里插入图片描述

鼠标 移动到 第一个 盒子上面时 , 开始向上翻转 ;
在这里插入图片描述

翻转完成的效果 , 底面展示在上面 ;

在这里插入图片描述

综合效果如下 :

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6367.html
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!