CSS3_3D变换(七)

1、CSS3_3D变换

1.1 3D空间与景深

3D空间:在父元素中将属性transform-style设置为preserve-3d开启3D空间,默认值为flat(开启2D空间);

景深:人眼与平面的距离,产生透视效果,使得效果更加立体。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>3D变换与景深</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.2 透视点的位置

透视点:人眼观察的位置,在父元素中设置。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>透视点的位置</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置(在右下角观察) */perspective-origin: 500px 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.3 3D位移
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>位移</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置(在右下角观察) *//* perspective-origin: 500px 200px; */}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴距离,不能写百分比 *//* transform: translateZ(150px); *//* 设置在X、Y、Z轴的位移距离,可以写百分比 */transform: translate3d(12px, 50%, 3px);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.4 3D旋转
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>旋转</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置X轴旋转角度 *//* transform: rotateX(100deg); *//* 设置Y轴旋转角度 *//* transform: rotateY(100deg); *//* 设置X、Y、Z轴旋转角度倍数 */transform: rotate3d(1, 1, 1, 30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.5 3D缩放
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>缩放</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴缩放比例,由于html元素没有厚度,则该属性调整景深,景深除以缩放的比例 */transform: scaleZ(4) rotateY(30deg);/* 设置3D缩放比例,X、Y、Z轴的缩放比例 *//* transform: scale3d(2,1,1) rotateY(30deg); */}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.6 3D多重变换
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>多重变换</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform-origin: top 20px;transform: rotateX(60deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.7 3D背部
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>背部</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform: rotateY(180deg);/* 设置背部不可见 */backface-visibility: hidden;}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>

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

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

相关文章

BMC运维管理:IPMI实现服务器远控制

IPMI实现服务器远控制 实操一、使用IPMI重置BMC用户密码实操二、使用IPMI配置BMC的静态IP实操三、IPMI实现BMC和主机控制操作实操四、ipmitool查看服务器基本信息实操五、ipmitool实现问题定位BMC(Baseboard Management Controller,基板管理控制器)是服务器硬件的一个独立管…

Android Profiler 内存分析

Android studio&#xff08;下面简称AS&#xff09;为App提供的性能分析工具&#xff0c;在AS3.0替换掉旧的分析工具&#xff0c;对于其使用方法&#xff0c;官方也有对应的介绍&#xff1a;Android Profiler 对于使用方法&#xff0c;我只用到比较简单的功能&#xff0c;高级的…

vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法

1、先上个截图&#xff1a; 说明&#xff1a;拖动上面的分隔栏就可以实现&#xff0c;改变左右区域的大小。 2、上面的例子来自官网的&#xff1a; Container 布局容器 | Element Plus 3、拖动的效果来自&#xff1a; https://juejin.cn/post/7029640316999172104#heading-1…

adminPage-vue3依赖DetailsModule版本说明:V1.2.1——1) - 新增span与labelSpan属性

文章目录 更新内容DetailsModuleAPI汇总属性自定义对象config.list(array<object> 类型) 使用span属性&#xff08;24栅格系统&#xff09; 更新内容 新增span与labelSpan属性&#xff0c;当使用span属性时将不适用默认的布局&#xff0c;如果24栅格系统进行重新布局 D…

系统聚类的分类数确定——聚合系数法

breast_cancer数据集分析——乳腺癌诊断 #读取乳腺癌数据 import pandas as pd import numpy as np from sklearn.datasets import load_breast_cancer data load_breast_cancer() X data.data y data.target.. _breast_cancer_dataset:Breast cancer wisconsin (diagnosti…

Android 实现柱形图

在 Android 中实现柱状图&#xff0c;可以使用流行的图表库 MPAndroidChart&#xff0c;它支持多种类型的图表&#xff0c;包括柱状图、折线图、饼图等。下面是一个基本的柱状图实现步骤&#xff0c;具体分为以下几个部分&#xff1a; 1. 添加依赖 首先&#xff0c;你需要在 …

dolphin 配置data 从文件导入hive 实践(一)

datax 支持多种数据源的相互读写&#xff0c;作为开源软件&#xff0c;提供了离线采集功能&#xff0c;方便系统开发&#xff0c;过程中遇到诸多配置&#xff0c;需要开发者自己探索&#xff0c;免费同样有成本 配置模板 {"setting": {},"job": {"s…

TypeScript 类型进阶指南

上篇文章讲述了泛型的基础用法&#xff0c;下面是关于 TypeScript 泛型的一些高级知识点&#xff0c;简单介绍一下。 1. 条件类型中的泛型约束 条件类型 (T extends U ? X : Y) 是 TypeScript 的一种高级特性&#xff0c;它根据类型的条件返回不同的结果。这种约束在泛型中非…

mysql5 授权

1、允许来自任意网段的root用户远程连接 所有 数据库并拥有所有权限 格式&#xff1a;grant 权限 on 数据库.* to 用户名登录主机 identified by “密码”; mysql> grant all privileges on *.* to root% identified by 123456; mysql> flush privileges;2、只允许来自1…

Neo4j 和 Python 初学者指南:如何使用可选关系匹配优化 Cypher 查询

Neo4j 和 Python 初学者指南&#xff1a;如何使用可选关系匹配优化 Cypher 查询 查询需求分析目标查询结构 编写 Cypher 查询查询解析OPTIONAL MATCH 和 COALESCE 的作用 在 Python 中使用 Neo4j 驱动执行查询使用 neo4j 驱动的 Python 示例代码代码解析示例输出 总结 在使用 N…

Gradle 创建Spring Boot项目

在 Spring Boot 项目中&#xff0c;Gradle 插件可以让你更方便地管理依赖、打包、运行和测试 Spring Boot 应用。以下是如何使用 Spring Boot Gradle 插件的详细指南&#xff1a; 1. 引入 Spring Boot 插件 在 build.gradle 中引入 Spring Boot 插件可以为项目提供各种便捷的…

AUTOSAR CP Ethernet State Manager(EthSM)规范的主要功能以及工作原理导读

AUTOSAR Ethernet State Manager&#xff08;以下简称EthSM&#xff09;规范的主要功能 AUTOSAR Ethernet State Manager&#xff08;以下简称EthSM&#xff09;规范的主要功能包括&#xff1a; 通信控制 网络模式管理&#xff1a;为通信管理器&#xff08;ComM&#xff09;提…

第二十课 Vue组件中的data

Vue组件中的data Vue组件中的data是独立的&#xff0c;Vue官方不建议各单元互通数据&#xff0c;每个组件有各自的数据对象&#xff0c;类似于Vue示例中的data。 组件中的data对象 组件中的data必须是带有返回值的函数对象 基础示例 <div id"app"><tes…

速盾:游戏盾的功能和原理详解

速盾有一款专注于网络游戏安全的防护系统&#xff0c;它通过实时监测游戏网络流量和玩家行为&#xff0c;以及使用先进的算法和技术进行分析和识别&#xff0c;检测出各种外挂、作弊行为和恶意攻击&#xff0c;从而保障游戏的公平性和玩家的安全性。 速盾游戏盾的主要功能包括…

深度学习中的感受野:从基础概念到多层次特征提取

在深度学习&#xff0c;特别是计算机视觉任务中&#xff0c;感受野&#xff08;Receptive Field&#xff09;是一个至关重要的概念。它指的是在神经网络中某一层的神经元在输入图像上“看到”的区域大小。感受野的大小影响了网络能捕捉的特征层级&#xff0c;从而决定了它的特征…

VirtIO实现原理(1)

本文内容参考: VirtIO实现原理——PCI基础_virtio-pci-CSDN博客 QEMU源码全解析 —— virtio(3)_qemu virtio block bus-CSDN博客 特此致谢! 序言 本系列文章是笔者在看了网名为“享乐主”的VirtIO系列文章后决心要写的。这位博主的“VirtIO专栏”中博文的内容从技术层…

2024年双11激光投影仪哪个品牌最好?当贝新品震撼视觉的秘密武器

激光投影仪逐渐占据家庭娱乐生活的中心位置&#xff0c;以其超大屏优势与卓越的性能获得了众多消费者的青睐。双11购物狂欢节期间&#xff0c;正是入手一台高品质激光投影仪的好时机&#xff0c;各大厂商也纷纷推出了品牌新品&#xff0c;2024年双11激光投影仪怎么选&#xff1…

React的概念以及发展前景如何?

React是一个由Facebook开发的用于构建用户界面的的开源JavaScript库&#xff0c;它主要用于构建大型、动态的Web应用程序。React的主要特点是使用VirtualDOM&#xff08;虚拟DOM&#xff09;来优化性能&#xff0c;并使用声明式的编程方式来编写UI。 React的主要概念包括&#…

定位,堆叠,CSS精灵,过渡,光标(前端)

一.定位 1.作用 灵活改变盒子在网页中的位置 2.标签 position 3.属性值 &#xff08;1&#xff09;相对定位relative relative&#xff08;相对定位&#xff09;-----改变位置的参照物是原来的位置&#xff0c;挪动后原来的位置不托标&#xff0c;不被占用。 要配合top…

【C语言】位运算

我们在上学计算机的第一节课&#xff0c;就应该见过这些常见的运算符。然而&#xff0c;你可能有印象&#xff0c;但记不住众多操作符当中的位运算符&#xff0c;以及它们的作用和使用场景&#xff0c;我们的大脑会选择性地遗忘它认为没用的信息&#xff0c;存储下那些“有实际…