HTML(29)——立体呈现

作用:设置元素的子元素是位于3D空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于3D空间

步骤:

  1. 父级元素添加 transform-style:preserve-3d 
  2. 子级定位
  3. 调整子盒子的位置(位移或旋转)

演示:

  <style>.cube {width: 200px;height: 200px;margin: 100px auto;background-color: rgb(106, 220, 116);transition: all 2s;}.cube div {width: 200px;height: 200px;}.front {background-color: #2180d4;}.back {background-color: #dd1e1e;}</style>
</head><body><div class="cube"><div class="front"></div><div class="back"></div></div>
</body>

按照步骤父级添加 transform-style: preserve-3d;为了更好的视觉效果我又添加了视距transform-style: preserve-3d;然后根据子绝父相原则给它们定位,最后transform: translateZ(80px)将两个盒子分开,添加一个旋转的效果使其更明显。

  <style>.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: rgb(106, 220, 116);transition: all 2s;transform-style: preserve-3d;transform-style: preserve-3d;}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: #2180d4;transform: translateZ(80px);}.back {background-color: #dd1e1e;}.cube:hover {transform: rotateY(180deg);}</style>
</head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

14-54 剑和诗人28 - 用于实时嵌入查找的向量检索

介绍 LLM 成功的关键因素是向量嵌入的使用。通过将文本转换为数字向量表示&#xff0c;我们可以将语义含义映射到数学向量空间。这使得模型能够根据向量之间的相似性在语言中概括模式。 随着我们的模型和数据集变得越来越大&#xff0c;高效地存储、组织和检索这些嵌入变得至关…

C++ Qt 自制开源科学计算器

C Qt 自制开源科学计算器 项目地址 软件下载地址 目录 0. 效果预览1. 数据库准备2. 按键&快捷键说明3. 颜色切换功能(初版)4. 未来开发展望5. 联系邮箱 0. 效果预览 普通计算模式效果如下&#xff1a; 科学计算模式效果如下&#xff1a; 更具体的功能演示视频见如下链接…

【易捷海购-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

ffmpeg滤镜-drawtext-命令行

使用 FFmpeg 在视频上添加文字可以通过 drawtext 滤镜来实现。这个滤镜允许你指定字体、大小、颜色、位置等。 基本用法 以下命令将 "Hello, World!" 添加到视频的顶部左侧&#xff1a; ffmpeg -i input.mp4 -vf "drawtexttextHello, World\!:fontcolorwhite…

JAVA Tesseract OCR引擎

Tess4j是一个基于Tesseract OCR引擎的Java库, Tesseract库最初由惠普实验室于1985年开发&#xff0c;后来被Google收购并于2006年开源。识别效果不好&#xff0c;速度还慢&#xff0c;但是好早好早了。 一、POM依赖 <!--OCR识别https://digi.bib.uni-mannheim.de/tesserac…

14-26 剑和侠客 – 预训练模型三部曲3 – 机器人时代来临

概述 在第 1 部分和第 2 部分中&#xff0c;我们讨论了适用于文本和图像任务的预训练模型&#xff0c;并探索了当今常用的模型。我们分析了这些模型的架构以及如何将它们用于特定任务。实现 AGI 所需的两个主要支柱是语言理解和机器的视觉能力。有许多任务与这两种能力有关。 …

Syncthing一款开源去中心化和点对点文件同步工具

Syncthing&#xff1a;一款开源的文件同步工具&#xff0c;去中心化和点对点加密传输&#xff0c;支持多平台&#xff0c;允许用户在多个设备之间安全、灵活地同步和共享文件&#xff0c;无需依赖第三方云服务&#xff0c;特别适合高安全性和自主控制的文件同步场景。 &#x…

4. kvm存储虚拟化

kvm存储虚拟化 一、命令行工具管理虚拟磁盘1、查看虚拟磁盘2、添加磁盘3、删除磁盘 二、qcow2格式的磁盘文件1、创建磁盘文件2、差量镜像/快速创建虚机2.1 创建差量镜像2.2 准备配置文件2.3 创建虚拟机2.4 批量部署虚拟机 三、存储池 storage pool1、类型2、在线迁移2.1 规划后…

【基于R语言群体遗传学】-14-种群起源的相对似然

我们可以将预测的基因型比例视为在种群中看到一组特定等位基因的概率。如果种群在等位基因频率上存在差异&#xff0c;我们可以使用基因型来推断个体起源于每个种群的相对可能性。大家可以先看一下之前的博客&#xff1a;群体遗传学_tRNA做科研的博客-CSDN博客 种群起源的相对似…

pytest-yaml-sanmu(六):YAML数据驱动测试

如果说 pytest 中哪些标记使用得最多&#xff0c;那无疑是 parametrize 了&#xff0c; 它为用例实现了参数化测试的能力&#xff0c;进而实现了数据驱动测试的能力。 1. 使用标记 parametrize 的使用需要提高两个内容&#xff1a; 参数名 参数值 pytest 在执行用例时&…

javascript DOM BOM 笔记

Web API API的概念 API&#xff08;Application Programming Interface,应用程序编程接口&#xff09;是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细…

el-scrollbar实现自动滚动到底部(AI聊天)

目录 项目背景 实现步骤 实现代码 完整示例代码 项目背景 chatGPT聊天消息展示滚动面板&#xff0c;每次用户输入提问内容或者ai进行流式回答时需要不断的滚动到底部确保展示最新的消息。 实现步骤 采用element ui 的el-scrollbar作为聊天消息展示组件。 通过操作dom来实…

高智能土壤养分检测仪:农业生产的科技新助力

在科技日新月异的今天&#xff0c;农业领域也迎来了革命性的变革。其中&#xff0c;高智能土壤养分检测仪作为现代农业的科技新助力&#xff0c;正逐渐改变着传统的农业生产方式&#xff0c;为农民带来了前所未有的便利与效益。 高智能土壤养分检测仪&#xff0c;是一款集高科技…

共筑智能未来 | 思腾合力闪耀2024世界人工智能大会(WAIC 2024)

在刚刚结束的2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;WAIC 2024&#xff09;上&#xff0c;思腾合力作为行业领先的人工智能基础架构解决方案提供商&#xff0c;凭借卓越的产品和解决方案&#xff0c;成为展会上的亮点之一。此次盛会不仅展示了全球人工智…

Android 性能优化之启动优化

文章目录 Android 性能优化之启动优化启动状态冷启动温启动热启动 耗时检测检测手段TraceView使用方式缺点 Systrace环境配置使用方式TraceView和Systrace比较 AOP统计耗时环境配置使用 优化白屏优化异步加载优化环境配置使用 延迟加载优化AppStartup 源码下载 Android 性能优化…

网站高性能架构设计——高性能缓存架构

从公众号转载&#xff0c;关注微信公众号掌握更多技术动态 --------------------------------------------------------------- 一、缓存基础 1.缓存简介 缓存提升性能的幅度&#xff0c;不只取决于存储介质的速度&#xff0c;还取决于缓存命中率。为了提高命中 率&#xff0c…

HarmonyOS Next应用开发之系统概述

一、鸿蒙系统概述 鸿蒙系统可以分为华为鸿蒙系统&#xff08;HUAWEI HarmonyOS&#xff09;和开源鸿蒙系统&#xff08;OpenHarmony&#xff09;&#xff0c;华为鸿蒙系统是基于OpenHarmony基础之上开发的商业版操作系统。他们二者的关系可以用下图来表示&#xff1a; 1.1、…

Linux 创建新虚拟机的全过程图解

一、创建新虚拟机 1.选择自定义 2.直接下一步 3.选择稍后安装 4.设置虚拟机名和安装位置 5.配置处理器&#xff08;处理器数量&#xff1a;4、每个处理器的内核&#xff1a;2&#xff09; 6. 内存选择 7.网络类型 8. IO控制器类型-默认推荐 9.磁盘类型-默认推荐 10.选择虚拟磁…

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver gdb是一款开源的、强大的、跨平台的程序调试工具。主要用于在程序运行时对程序进行控制和检查&#xff0c;如设置断点、单步执行、查看变量值、修改内存数据等&#xff0c;从而帮助开发者定位和修复代码中的错误。 gdbserve…

Mysql 高性能索引

引言 索引是一种用于快速查询和检索数据的数据结构&#xff0c;其本质可以看成是一种排序好的数据结构。 常见的索引类型包括B-Tree索引、哈希索引、空间数据索引&#xff08;R-Tree&#xff09;、全文索引。 索引的类型 在MySQL中&#xff0c;索引是在 存储引擎层 而不是服…