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.mzph.cn/bicheng/43493.shtml

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

相关文章

【GC 垃圾回收算法和回收器】

作者&#xff1a;ofLJli 链接&#xff1a;https://juejin.cn/post/7003213289425633287?searchId20240709085629749958B21D886D4E67D4 来源&#xff1a;稀土掘金 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 概述 在JVM中主要的结构为&…

怎样优化 PostgreSQL 中对 XML 数据的存储和查询?

文章目录 一、数据类型选择二、索引优化三、查询优化四、分区策略五、存储参数调整六、示例代码与解释七、性能测试与监控八、数据清理与压缩九、注意事项 在 PostgreSQL 中处理 XML 数据时&#xff0c;为了实现高效的存储和查询&#xff0c;需要采取一系列的优化策略。以下将详…

【Linux进阶】文件系统3——目录树,挂载

前言 在Windows 系统重新安装之前&#xff0c;你可能会事先考虑&#xff0c;到底系统盘C盘要有多大容量&#xff1f;而数据盘D盘又要给多大容量等&#xff0c;然后实际安装的时候&#xff0c;你会发现其实C盘之前会有个100MB的分区被独立出来&#xff0c;所以实际上你就会有三个…

探索横河AQ6370E系列光谱仪隐藏功能!---高级标记功能!

横河AQ6370E系列光谱仪的这款光谱仪的传统功能中&#xff0c;其实还隐藏了一个特别实用的功能——高级标记功能&#xff01;前所未有的方式解析数据与测量信号&#xff0c;不仅带来了全新的测试体验&#xff0c;还提升了测量速度&#xff0c;那么这个功能怎么找到呢&#xff0c…

ALG:MODTRAN查找表参数详解(学习笔记4)

一、Modtran安装及环境配置 https://blog.csdn.net/qq_41358707/article/details/134721973 二、ALG配置更新 添加大气RTM。Settings&#xff0c;进入首选项界面&#xff0c;单击RTM选项卡以更新RTM的配置&#xff1a; 从窗口右上角的select RTM弹出菜单中选择一个大气RTM&a…

【数据结构】TreeMap及TreeSet

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; 一、概念 TreeMap和TreeSet都是Java中基于红黑树&#xff08;Red-Black tree&#xff09;实现的有序集合类。它们分别实现了SortedMap和SortedSet接口&#xff0c;因此提供了按照键&#xff08;对…

更深入了解汽车与航空电子等安全关键型应用的IP核考量因素

作者&#xff1a;Philipp Jacobsohn&#xff0c;SmartDV高级应用工程师 中国已经连续十多年成为全球第一大汽车产销国&#xff0c;智能化也成为了汽车行业发展的一个重要方向&#xff0c;同时越来越多的制造商正在考虑进入无人机和飞行汽车等低空设备&#xff0c;而所有的这些…

ExcelVBA运用Excel的【条件格式】(三)

ExcelVBA运用Excel的【条件格式】&#xff08;三&#xff09;前面知识点回顾1. 访问 FormatConditions 集合 Range.FormatConditions2. 添加条件格式 FormatConditions.Add 方法语法表达式。添加 (类型、 运算符、 Expression1、 Expression2)其中 TextOperator:***&am…

“创新电商营销:‘精选返现‘模式引领购物新风尚“

在电子商务领域的蓬勃发展中&#xff0c;创新营销模式层出不穷&#xff0c;其中“精选返现”模式凭借其创新的互动机制与激励机制&#xff0c;赢得了广大消费者的青睐。该模式通过优化价格策略、融入社交互动及构建梯度回馈体系&#xff0c;有效激发了消费者的购买动力&#xf…

企业应对策略:全面防御.DevicData-P-xxxxxx勒索病毒

引言 在数字化时代&#xff0c;网络安全已成为不可忽视的重要议题。随着互联网的普及&#xff0c;各种网络威胁层出不穷&#xff0c;其中勒索病毒以其独特的攻击方式和巨大的破坏性&#xff0c;给个人用户和企业带来了严重的经济损失和数据安全风险。在众多勒索病毒中&#xff…

昇思25天学习打卡营第11天|基于MindSpore的GPT2文本摘要

数据集 准备nlpcc2017摘要数据&#xff0c;内容为新闻正文及其摘要&#xff0c;总计50000个样本。 数据需要预处理&#xff0c;如下 原始数据格式&#xff1a; article: [CLS] article_context [SEP] summary: [CLS] summary_context [SEP] 预处理后的数据格式&#xff1a; […

Redis安装部署与使用,多实例

一、redis基础 1.1 关系型数据库和NoSQL数据库 数据库主要分为两大类&#xff1a;关系型数据库与 NoSQL 数据库。 关系型数据库&#xff0c;是建立在关系模型基础上的数据库&#xff0c;其借助于集合代数等数学概念和方法来处理数据库中的数据。主流的 MySQL、Oracle、MS SQ…

Python爬虫教程第2篇-reqeusts是最好用的网络请求工具

简介 爬虫第一步就是网络请求&#xff0c;一个好用的网络请求库会非常重要。而requests库就是非常好用的一个http库&#xff0c;pyhon中虽然也有内置的urllib库用于网络请求&#xff0c;但是urllib使用起来比较的麻烦&#xff0c;而且缺少很多实用的高级功能&#xff0c;所以这…

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

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

使用MySQLInstaller配置MySQL

操作步骤 1.配置High Availability 默认选项Standalone MySQL Server classic MySQL Replication 2.配置Type and Networking ◆端口默认启用TCP/P网络 ◆端口默认为3306 3.配置Account and Roles 设置root账户的密码、添加其他管理员 4.配置Windows Service ◆配置MySQL Serv…

Java线程池及面试题

1.线程池介绍 顾名思义&#xff0c;线程池就是管理一系列线程的资源池&#xff0c;其提供了一种限制和管理线程资源的方式。每个线程池还维护一些基本统计信息&#xff0c;例如已完成任务的数量。 总结一下使用线程池的好处&#xff1a; 降低资源消耗。通过重复利用已创建的…

xcode项目添加README.md文件并进行编辑

想要给xcode项目添加README.md文件其实还是比较简单的&#xff0c;但是对于不熟悉xcode这个工具的人来讲&#xff0c;还是有些陌生&#xff0c;下面简单给大家讲一下流程。 选择“文件”>“新建”>“文件”&#xff0c;在其他&#xff08;滚动到工作表底部&#xff09;下…

Java基础-组件及事件处理(中)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 BorderLayout布局管理器 说明&#xff1a; 示例&#xff1a; FlowLayout布局管理器 说明&#xff1a; …

【Qt5】入门Qt开发教程,一篇文章就够了(详解含qt源码)

目录 一、Qt概述 1.1 什么是Qt 1.2 Qt的发展史 1.3 Qt的优势 1.4 Qt版本 1.5 成功案例 二、创建Qt项目 2.1 使用向导创建 2.2 一个最简单的Qt应用程序 2.2.1 main函数中 2.2.2 类头文件 2.3 .pro文件 2.4 命名规范 2.5 QtCreator常用快捷键 三、Qt按钮小程序 …

使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击-激光组件(二)

文章目录 开发思路发射点添加子弹组件构建子弹处理缩放效果闪光效果 使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击&#xff08;一&#xff09; 开发思路 整体开发还是基于组件的思维。相比于工厂模式或者状态机&#xff0c;可能有些老套&#xff0c;但是更容易理解和编…