立体呈现案例

简介: 立体呈现案例

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            /* 实现3D效果 */
            transform-style: preserve-3d;
            transition: all 2s;
        }
        .son1 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
            /* 将盒子1向前靠近200px */
            transform: translateZ(200px);
        }
        .son2 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        /* 为了凸显出效果,这个需要旋转90度才可以看到 */
        .father:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>


制作步骤


使用到了3d呈现的一条属性,这一条属性需要写在父盒子中,先将两个盒子定位到一个地方,是的两个盒子重合在一起,之后将一个盒子沿着z轴正方向偏移200px,这样子的话就实现了3d效果,但是要显示3d效果的话,需要我们将整个父盒子沿着Y轴旋转一个角度,这样子才可以看到我们设置的3d效果。


相关文章
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
559 1
|
JavaScript 数据可视化 图形学
iCraft Editor - 助你轻松绘制出色的立体架构图
iCraft Editor是一款创新工具,专为绘制立体架构图设计,带来直观且吸引人的3D视觉体验。它简化了复杂系统的表达,支持自由旋转与缩放,让用户从多角度审视设计。简洁界面与丰富图形库让操作变得简单快捷,即使是新手也能迅速上手。iCraft Editor支持子场景嵌套及外部模型导入,适用于软件架构设计、系统部署维护等多种场景,提升沟通效率。无需编程基础,即可在线免费使用,轻松实现复杂设计的可视化。开启3D新视角,让您的创意无限延伸![官网](https://icraft.gantcloud.com)
1864 1
iCraft Editor - 助你轻松绘制出色的立体架构图
|
监控 数据可视化 算法
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
244 1
三维可视化神器带来无限可能,原来三维场景也可以如此轻松实现
|
存储 安全 Java
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
在一次意外中,作者因三年前将测试代码遗忘在GitHub上而遭遇了代码被他人fork的问题。为解决这一危机,作者详细介绍了如何通过GitHub的DMCA下架通知流程安全删除敏感代码,包括处理私人信息和商标侵权的具体步骤。本文不仅提供了实用的操作指南,还强调了及时响应的重要性,帮助读者避免类似风险
433 1
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
|
Python
从零到一:构建Python异步编程思维,掌握协程与异步函数
【7月更文挑战第15天】Python异步编程提升效率,通过协程与异步函数实现并发。从async def定义异步函数,如`say_hello()`,使用`await`等待异步操作。`asyncio.run()`驱动事件循环。并发执行任务,如`asyncio.gather()`同时处理`fetch_data()`任务,降低总体耗时。入门异步编程,解锁高效代码。
165 1
|
JSON 数据可视化 定位技术
可视化 | Python绘制高颜值台风地理轨迹图
可视化 | Python绘制高颜值台风地理轨迹图
|
算法 程序员 数据库连接
深入探索C++中的RAII原则:资源管理的艺术 (In-Depth Exploration of RAII in C++: The Art of Resource Management)...
深入探索C++中的RAII原则:资源管理的艺术 (In-Depth Exploration of RAII in C++: The Art of Resource Management)...
434 2
|
安全 API C#
C# | System.IO.Pipelines 很酷的读写数据流方式!
文本分享一种新的读写数据流方式 —— System.IO.Pipelines。这个东西在 .NET Core 2.1 中出现了,它能够帮助你更高效地处理数据流。 System.IO.Pipelines 是啥? System.IO.Pipelines 是一个用于读写数据流的高性能 API。它主要由三个部分组成:Pipe、PipelineReader 和 PipelineWriter。 Pipe 是一个异步、线程安全的缓冲区,它让数据在生产者和消费者之间流动。PipelineReader 和 PipelineWriter 则是 Pipe 的读取和写入端点。
743 0
C# | System.IO.Pipelines 很酷的读写数据流方式!
|
JavaScript
Vue Antdv 上传组件(a-upload、a-upload-dragger)二次封装(DZMAntdvUpload)
Vue Antdv 上传组件(a-upload、a-upload-dragger)二次封装(DZMAntdvUpload)
1581 0

热门文章

最新文章