【CSS3】CSS3 3D 转换示例 - 3D 旋转木马 ( @keyframes 规则 定义动画 | 为 盒子模型 应用动画 | 开启透视视图 | 设置 3D 呈现样式 )

文章目录

  • 一、3D 导航栏示例 - 核心要点
    • 1、需求分析
    • 2、HTML 结构
      • section 标签
    • 3、CSS 样式
      • @keyframes 规则 定义动画
      • 为 盒子模型 应用动画
      • 开启透视视图
      • 设置 3D 呈现样式
      • 鼠标移动到控件上方效果
      • 设置 6 个子盒子模型的效果
  • 二、完整代码示例
    • 1、代码示例
    • 2、展示效果





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


1、需求分析


实现下图的 旋转木马 效果 :

在这里插入图片描述


2、HTML 结构


HTML 标签结构很简单 , 只是一个 section 标签 , 内部包裹着 6 个 div 标签子盒子 ;

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </section>
</body>

section 标签

<section> 标签 是 HTML5 引入的 语意元素 , 表示一组独立的内容 , 这些内容 逻辑上 属于 同一个部分 或 章节 ;

使用 <section> 标签可以帮助 组织 和 划分 页面内容 , 提高文档的可读性和可维护性 , 有助于 搜索引擎 更好地理解 页面结构和内容 ;


3、CSS 样式


@keyframes 规则 定义动画

使用 @keyframes 规则 定义动画 , rotate 是动画的名称 , 该规则定义了动画的具体步骤 , 如果为 盒子模型 应用该动画 , 该 盒子模型 会 绕着 Y 轴旋转 360 度 ;

        @keyframes rotate {
            /* 定义动画 , 名称是 rotate , 该动画绕着 Y 轴旋转 360 度 */
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }

为 盒子模型 应用动画

CSS 中 使用 animation 属性 为 标签元素 应用动画效果 ;

        section {
            /* 添加动画效果 , 控件 匀速旋转 每 10 秒旋转一圈 无限循环 */
            animation: rotate 10s linear infinite;
        }
  • rotate : 动画的名称 , 由 @keyframes 规则 定义 ;
  • 10s : 动画的 单次周期 持续时间 , 即完成一个动画的完整周期需要 10 秒 ;
  • linear : 动画匀速运动 ;
  • infinite : 动画将无限次地重复执行 ;

开启透视视图

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

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

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

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

设置 3D 呈现样式

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

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

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

鼠标移动到控件上方效果

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

        section:hover {
            /* 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 */
            animation-play-state: paused;
        }

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

该示例中 , 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 ;

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

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

修改下 section 的属性 , 为其设置 transform: rotateX(-20deg); 属性 , 将其绕 X 轴旋转 -20 度 , 即可看到 每个 子盒子模型的 大概 排列位置 ;

在这里插入图片描述

第 1 个盒子不需要旋转 , 向屏幕方向移动 300 像素 ;

        section div:nth-child(1) {
            /* 第 1 个盒子不需要旋转 , 向屏幕方向移动 300 像素 */
            transform: rotateY(0) translateZ(300px);
            background: blue;
        }

第 2 个盒子 先旋转 60 度 , 然后再向屏幕方向移动 300 像素 ;

        section div:nth-child(2) {
            /* 第 2 个盒子 先旋转 60 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(60deg) translateZ(300px);
            background: purple;
        }

第 3 个盒子 先旋转 120 度 , 然后再向屏幕方向移动 300 像素 ;

        section div:nth-child(3) {
            /* 第 3 个盒子 先旋转 120 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(120deg) translateZ(300px);
            background: green;
        }

第 4 个盒子 先旋转 180 度 , 然后再向屏幕方向移动 300 像素 ;

        section div:nth-child(4) {
            /* 第 4 个盒子 先旋转 180 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(180deg) translateZ(300px);
            background: magenta;
        }

第 5 个盒子 先旋转 240 度 , 然后再向屏幕方向移动 300 像素 ;

        section div:nth-child(5) {
            /* 第 5 个盒子 先旋转 240 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(240deg) translateZ(300px);
            background: pink;
        }

第 6 个盒子 先旋转 300 度 , 然后再向屏幕方向移动 300 像素 ;

        section div:nth-child(6) {
            /* 第 6 个盒子 先旋转 300 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(300deg) translateZ(300px);
            background: cyan;
        }




二、完整代码示例


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>CSS3 3D 旋转木马示例</title>
    <style>
        body {
            /* 设置透视视图效果 , 近大远小 */
            perspective: 5000px;
        }
        
        section {
            /* 相对定位 */
            position: relative;
            width: 300px;
            height: 200px;
            /* 整体 上下 150 像素边距 , 水平居中对齐 */
            margin: 150px auto;
            /* 设置 3D 呈现效果 , 子盒子可设置 3D 效果 */
            transform-style: preserve-3d;
            /* 添加动画效果 , 控件 匀速旋转 每 10 秒旋转一圈 无限循环 */
            animation: rotate 10s linear infinite;
            background: red;
        }
        
        section:hover {
            /* 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            /* 定义动画 , 名称是 rotate , 该动画绕着 Y 轴旋转 360 度 */
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            /* 绝对定位 , 子绝父相 , 其父容器必须是相对布局 */
            position: absolute;
            /* 左上角定位在父容器 0,0 位置 */
            top: 0;
            left: 0;
            /* 宽高充满父盒子 */
            width: 100%;
            height: 100%;
            /* 设置文字大小 */
            font-size: 60px;
            /* 设置文字颜色 */
            color: #fff;
            /* 设置文字在盒子中水平对齐 */
            text-align: center;
            /* 设置文字在盒子中垂直对齐 */
            line-height: 200px;
        }
        
        section div:nth-child(1) {
            /* 第 1 个盒子不需要旋转 , 向屏幕方向移动 300 像素 */
            transform: rotateY(0) translateZ(300px);
            background: blue;
        }
        
        section div:nth-child(2) {
            /* 第 2 个盒子 先旋转 60 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(60deg) translateZ(300px);
            background: purple;
        }
        
        section div:nth-child(3) {
            /* 第 3 个盒子 先旋转 120 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(120deg) translateZ(300px);
            background: green;
        }
        
        section div:nth-child(4) {
            /* 第 4 个盒子 先旋转 180 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(180deg) translateZ(300px);
            background: magenta;
        }
        
        section div:nth-child(5) {
            /* 第 5 个盒子 先旋转 240 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(240deg) translateZ(300px);
            background: pink;
        }
        
        section div:nth-child(6) {
            /* 第 3 个盒子 先旋转 300 度 , 然后再向屏幕方向移动 300 像素 */
            transform: rotateY(300deg) translateZ(300px);
            background: cyan;
        }
    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </section>
</body>

</html>

2、展示效果


在浏览器中的展示效果如下 :

在这里插入图片描述

动态效果如下 :

在这里插入图片描述

鼠标移动到 section 标签盒子 上方时 , 停止转动 ;

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/456546.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

访问者模式（Visitor Pattern）

访问者模式（Visitor Pattern）

访问者模式 说明 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型模式&#xff0c;表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 该模式是将数据结构与数据操作分离的设计模式&#xff0c;是…
阅读更多...
实现微服务：匹配系统

实现微服务：匹配系统

HTTP与WebSocket协议 1. HTTP协议是无状态的&#xff0c;每次请求都是独立的&#xff0c;服务器不会保存客户端的状态信息。而WebSocket协议是有状态的&#xff0c;一旦建立连接后&#xff0c;服务器和客户端可以进行双向通信&#xff0c;并且可以保持连接状态&#xff0c;服务…
阅读更多...
“遥感+”多技术融合：碳排放监测的创新路径“

“遥感+”多技术融合：碳排放监测的创新路径“

在全球环境问题日益严重的今天&#xff0c;以全球变暖为主要特征的气候变化成为了人类面临的巨大挑战。它威胁着地球的生态平衡&#xff0c;对全球可持续发展构成了严峻的挑战。为了应对这一挑战&#xff0c;各国纷纷采取行动&#xff0c;致力于实现碳达峰和碳中和的目标。 在…
阅读更多...
Window11安装达梦数据库

Window11安装达梦数据库

由于现在流行国产化&#xff0c;很多公司的数据库产品都使用了国产数据库&#xff0c;所以&#xff0c;今天给大家讲解一下&#xff0c;达梦数据库的安装和试用&#xff0c;这样学完以后&#xff0c;就可以直接在公司里面用了。 首先&#xff0c;需要先注册账号&#xff0c;然…
阅读更多...
怎么在家里远程控制公司电脑？

怎么在家里远程控制公司电脑？

在家远程控制公司办公电脑需求渐增 在家工作也被称为远程办公&#xff0c;可以节省通勤时间&#xff0c;而且也为老板提供了对应的工作成果&#xff0c;是一个一举两得的好方法。 如果您想要在家远程控制公司电脑&#xff0c;先需要在公司的电脑上安装并运行相应的远程工具&a…
阅读更多...
css设置选中文字和选中图片字的颜色

css设置选中文字和选中图片字的颜色

要改变页面中选中文字的颜色&#xff0c;可以使用 CSS 的 ::selection 伪元素来实现 *::selection {/* 改变选中文字的背景色 */background-color: #c42121;/* 改变选中文字的文本颜色 */color: #fff; } 用通配符选择器给所有元素都加上了 ::selection伪元素&#xff0c;用于…
阅读更多...
CrossOver24软件免费电脑虚拟机，快速在Mac和Linux上运行Windows软件

CrossOver24软件免费电脑虚拟机，快速在Mac和Linux上运行Windows软件

当然&#xff0c;除了之前提到的核心技术、兼容性和性能优化外&#xff0c;CrossOver2024还具有其他一些值得关注的性能特点&#xff1a; CrossOver Mac-安装包下载如下&#xff1a;https://wm.makeding.com/iclk/?zoneid50028 CrossOver linux-安装包下载如下&#xff1a;ht…
阅读更多...
工业界真实的推荐系统(小红书)-离散特征处理、矩阵补充模型、双塔模型

工业界真实的推荐系统(小红书)-离散特征处理、矩阵补充模型、双塔模型

课程特点&#xff1a;系统、清晰、实用&#xff0c;原理和落地经验兼具 b站&#xff1a;https://www.bilibili.com/video/BV1HZ421U77y/?spm_id_from333.337.search-card.all.click&vd_sourceb60d8ab7e659b10ea6ea743ede0c5b48 讲义&#xff1a;https://github.com/wangsh…
阅读更多...
linux系统创建私有容器仓库和docker容器的资源限制

linux系统创建私有容器仓库和docker容器的资源限制

私有仓库创建和资源限制 创建私有仓库docker资源限制系统压力测试工具stresscpu资源限制限制CPU Share限制CPU核数CPU绑定 mem资源限制限制IO 创建私有仓库 上传harbor压缩包 解压 下载docker-compose 进入解压后的目录 修改配置文件 mv harbor.yml.tmpl harbor.yml vim harb…
阅读更多...
Unity3d Shader篇（十四）— 卡通着色

Unity3d Shader篇（十四）— 卡通着色

文章目录 前言一、什么是卡通着色&#xff1f;1. 卡通着色原理2. 卡通着色优缺点优点&#xff1a;缺点&#xff1a; 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 卡通轮廓 Pass4. 卡通主 Pass 三、效果四、总结 前言 卡通着色是一种常见的图形渲染效果&#xff0c;它将…
阅读更多...
大语言模型：Query Rewriting for Retrieval-Augmented Large Language Models

大语言模型：Query Rewriting for Retrieval-Augmented Large Language Models

总体思路 作者首先指出大语言模型虽然取得了很好的效果&#xff0c;但是仍然存在幻觉和时间顺序混乱的问题&#xff0c;因此需要额外知识库和LLM内部知识库相结合&#xff0c;来修正&#xff1b;因此优化传统的retriever-reader的方案成为需要&#xff1b;目前的研究方案当中使…
阅读更多...
Nginx的日志怎么看,在哪看,access.log日志内容详解

Nginx的日志怎么看,在哪看,access.log日志内容详解

Nginx 的日志文件通常位于服务器的文件系统中&#xff0c;具体位置可能因配置而异。以下是查看 Nginx 日志的几种方法&#xff1a; 1、查看访问日志&#xff1a;在默认配置下&#xff0c;Nginx 的访问日志文件路径为 /var/log/nginx/access.log。您可以通过命令 sudo cat /var…
阅读更多...
前端框架vue的样式操作，以及vue提供的属性功能应用实战

前端框架vue的样式操作，以及vue提供的属性功能应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
【2024-完整版】python爬虫 批量查询自己所有CSDN文章的质量分：附整个实现流程

【2024-完整版】python爬虫 批量查询自己所有CSDN文章的质量分：附整个实现流程

【2024】批量查询CSDN文章质量分 写在最前面一、分析获取步骤二、获取文章列表1. 前期准备2. 获取文章的接口3. 接口测试&#xff08;更新重点&#xff09; 三、查询质量分1. 前期准备2. 获取文章的接口3. 接口测试 四、python代码实现1. 分步实现2. 批量获取文章信息3. 从exce…
阅读更多...
乐鑫芯片支持的无线协议

乐鑫芯片支持的无线协议

几种图标内容
阅读更多...
必看 11个AI自动写作神器

必看 11个AI自动写作神器

AI自动写作神器是当今科技发展中的重大突破&#xff0c;能够以人工智能技术为基础&#xff0c;自动生成高质量的文章。下面将介绍10个AI自动写作神器&#xff0c;看看他们有哪些值得推荐的地方&#xff1f; 一、爱制作ai写作生成器 爱制作AI运用先进的文字生成式AI技术&#xf…
阅读更多...
visualvm连接到远程服务

visualvm连接到远程服务

启动命令 java -Dcom.sun.management.jmxremote.rmi.port1232 \ -Dcom.sun.management.jmxremote.port1232 \ -Dcom.sun.management.jmxremote.sslfalse \ -Dcom.sun.management.jmxremote.authenticatefalse \ -jar ${你的jar包名}.jar参数说明 java \ #指定JMX RMI (Re…
阅读更多...
2048.神、上帝以及老天爷

2048.神、上帝以及老天爷

典型的错排问题 题解&#xff1a;计算所有人错排的种类数/阶乘 错排种类数&#xff1a; 1——0 2——1 3——2 第一个人两种选择假设1拿了2的&#xff0c;那么2只能拿3&#xff0c;因为2如果拿1&#xff0c;3就会拿3就不会拿错 4——9 3(12) 5——44 f(n)(n-1)*[f(n-1)…
阅读更多...
尝试搭建谷粒商城 记录（二）

尝试搭建谷粒商城 记录（二）

1、后台管理系统 1.整合renren-fast 在记录&#xff08;一&#xff09;中&#xff0c;我们已经基本配置好了一些环境 &#xff0c;后续有需要再补充吧 下载renren-fast &#xff0c;把文件夹复制到gulimall文件夹下&#xff0c; 然后修改父pom.xml文件加入这个module 修改renre…
阅读更多...
如何使用vscode创建Node.js服务并结合内网穿透实现远程访问本地服务

如何使用vscode创建Node.js服务并结合内网穿透实现远程访问本地服务

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023