当前位置: 首页 > news >正文

【前段基础入门之】=>CSS3新特性 3D 变换

导语

在上一章节中,我们分享了2D 变换的效果,也分享了一些案例,同时,既然有2D 变换,那么也就肯定有 3D 变换 那么本章节,就为大家带来有关3D 变换的分享.

在这里插入图片描述


文章目录

  • `开启3D空间`
  • 设置`景深`
  • `透视点位置`
  • `3D 位移`
  • `3D 旋转`
  • 3D `缩放`
  • 多重变换
  • 背部可见性

在这里插入图片描述

开启3D空间

重要原则:元素进行 3D 变换的首要操作:必须要为其父元素开启 3D 空间
在这里插入图片描述

transform-style: preserve-3d;  /*为其父元素开启 3D 空间*/

设置景深

概念

何为景深?—— 指定观察者与 z=0 平面的距离,能让发生 3D 变换的元素,产生立体透视效果,看来更加立体
在这里插入图片描述

transform-style: preserve-3d;  /*为其父元素开启 3D 空间*/
perspective: 700px;  /*并且自定义设置一个景深*/

初步案例

<div class="box"><div>3D变换</div>
</div>
.box {width: 600px;height: 600px;border: 1px solid;margin: 0 auto;margin-top: 105px;transform-style: preserve-3d;  /*为其父元素开启 3D 空间*/perspective: 700px;  /*并且自定义设置一个景深*/&>div {width: 600px;height: 600px;font-size: 25px;background-color: #5693af;transform: rotatex(53deg);}
}

立体效果
在这里插入图片描述


透视点位置

所谓透视点位置,就是观察者位置;默认的透视点在当前开启3D 元素的正中心

在这里插入图片描述

取值范围

属性取值
perspective-originx轴距离 y轴距离

x轴百分比 y轴百分比; 默认观察源为 50% 50%

方位单词1 方位单词2; 方位单词:top、bottom、center、left、right

注意:

  • 若只设置了一个值,则第二个值默认为 50%

在这里插入图片描述


3D 位移

3D 位移是在 2D 位移的基础上,可以让元素沿 z 轴位移,具体使用方式如下:

  • 先给元素添加 转换属性 transform
  • 编写 transform 的具体值, 3D 位移 相关可选值如下:
属性值描述
translateZ设置 z 轴位移,需指定长度值,正值向屏幕外,负值向屏幕里,且不能写 百分比
translate3d第1个参数对应 x 轴,第2个参数对应 y 轴,第3个参数对应 z 轴,且均不能省略
transform: translate3d(105px, 136px, 95px);

在这里插入图片描述


3D 旋转

3D 旋转是在 2D 旋转的基础上,可以让元素沿 x 轴y 轴旋转,具体使用方式如下:

  • 先给元素添加 转换属性 transform
  • 编写 transform 的具体值, 3D 旋转 相关可选值如下:
属性值描述
rotateX设置 x 轴旋转角度,需指定一个角度值( deg ),面对 x 轴正方向:正值顺时针,负值逆时针
rotateY设置 Y 轴旋转角度,需指定一个角度值( deg ),面对 Y 轴正方向:正值顺时针,负值逆时针
rotateZ设置 Z 轴旋转角度,需指定一个角度值( deg ),面对 Z 轴正方向:正值顺时针,负值逆时针
rotate默认,等同于rotateZ
rotate3d接收 4个参数,前 3 个参数分别表示坐标轴: x , y , z , 第 4 个参数表示旋转的角度值(deg),参数不允许省略
transform: rotate3d(1,1,1,30deg); 
  • 表示:X轴、 Y轴 、 Z轴 分别旋转30 度

3D 缩放

3D 缩放是在 2D 缩放的基础上,可以让元素沿 z 轴缩放,具体使用方式如下:

  • 先给元素添加 转换属性 transform
  • 编写 transform 的具体值, 3D 缩放 相关可选值如下:
属性值描述
scaleZ设置 z 轴方向的缩放比例,值为一个数字1 表示不缩放,大于 1 放大,小于 1 缩小
scale3d接收3个参数第1个参数对应 x 轴,第2个参数对应 y 轴,第3个参数对应 z 轴,参数不允许省略

值得注意

由于HTML 元素没有厚度,所以当设置 Z轴 缩放的时候,实际上是改变的景深


多重变换

多个变换,可以同时使用一个 transform 来集中式编写

transform: translateZ(100px) scaleZ(3) rotateY(40deg);

在这里插入图片描述


背部可见性

使用 backface-visibility 指定元素背面,在面向用户时是否可见,常用值如下:

属性值描述
visible指定元素背面可见,允许显示正面的镜像。—— 默认值
hidden指定元素背面不可见

在这里插入图片描述


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

相关文章:

【前段基础入门之】=>CSS3新特性 3D 变换

导语 在上一章节中&#xff0c;我们分享了2D 变换的效果&#xff0c;也分享了一些案例&#xff0c;同时&#xff0c;既然有2D 变换&#xff0c;那么也就肯定有 3D 变换 那么本章节&#xff0c;就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D …...

form表单的三种封装方法(Vue+ElementUI)

form表单的三种封装方法&#xff08;VueElementUI&#xff09; 1.首先是最普通&#xff0c;也是大家最先想到的方法&#xff0c;直接封装&#xff1a;2.实现表单动态渲染、可视化配置的方法&#xff0c;动态表单又可以分为两种方法&#xff1a;(注意&#xff1a;注意 v-model 的…...

云原生周刊:CNCF 宣布 Cilium 毕业 | 2023.10.16

开源项目推荐 Reloader Reloader 是一个 Kubernetes 控制器&#xff0c;用于监控 ConfigMap 和 Secrets 中的变化&#xff0c;并对 Pod 及其相关部署、StatefulSet、DaemonSet 和 DeploymentConfig 进行滚动升级&#xff01; Spegel Spegel 在瑞典语中意为镜像&#xff0c;…...

岩土工程监测利器:多通道振弦数据记录仪应用隧道监测

岩土工程监测利器&#xff1a;多通道振弦数据记录仪应用隧道监测 岩土工程监测在现代工程建设中的作用越来越重要。为了确保工程质量和工程安全&#xff0c;需要对工程过程中的各种参数进行实时监测和记录。而多通道振弦数据记录仪则是一种重要的监测工具&#xff0c;特别适用…...

hive排序

目录 order by (全局排序asc ,desc) sort by(reduce 内排序) Distribute by(分区排序) Cluster By&#xff08;当 distribute by 和 sorts by 字段相同时 &#xff0c;可以使用 &#xff09; order by (全局排序asc ,desc) INSERT OVERWRITE LOCAL DIRECTORY /home/test2 …...

网络安全入门教程(非常详细)从零基础入门到精通

网络安全是一个庞大而不断发展的领域&#xff0c;它包含多个专业领域&#xff0c;如网络防御、网络攻击、数据加密等。介绍网络安全的基本概念、技术和工具&#xff0c;逐步深入&#xff0c;帮助您成为一名合格的网络安全从业人员。 一、网络安全基础知识 1.计算机基础知识 …...

自动驾驶中的数据安全和隐私

自动驾驶技术的发展已经改变了我们的出行方式&#xff0c;但伴随着这项技术的普及&#xff0c;数据安全和隐私问题也变得愈发重要。本文将探讨自动驾驶中的数据收集、数据隐私和安全挑战&#xff0c;以及如何保护自动驾驶系统的数据。 自动驾驶中的数据收集 在自动驾驶技术中…...

回应:淘宝支持使用微信支付?

近日&#xff0c;就有网友共享称淘宝APP的支付界面出现“微信二维码支付”及其“去微信找个朋友帮我付”这个选项。 淘宝官方网对此回应称&#xff0c;“微信二维码支付作用仍在逐步开放中&#xff0c;目前只有针对一些客户对外开放&#xff0c;并且只有部分商品适用这一付款方…...

k8s的etcd启动报错

背景 电脑休眠状态意外断电导致虚拟机直接进入关机状态。 问题 kubectl命令报错 [rootmaster01 ~]#kubectl get node The connection to the server master01.kktb.org:6443 was refused - did you specify the right host or port?kubelet服务报错 Oct 15 08:39:37 mas…...

codeigniter 4.1.3 gadget chain

EXP code 找到一条很有意思的codeigniter框架的链。 <?php namespace CodeIgniter\HTTP {class CURLRequest {protected $config ["debug" > "./eee.php"];} }namespace CodeIgniter\Session\Handlers {class MemcachedHandler{public function …...

L1-039 古风排版 C++解法

题目再现 中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;<100&#xff09;&#xff0c;是每一列的字符数。第二行给出一个长度不超过1000的非…...

docker安装tomcat

1.通过dockerhub搜索tomcat镜像 dockerhub官网&#xff1a;https://hub.docker.com/ 选择star最多的tomcat点击进入&#xff0c;有很多tomcat详细信息 docker run&#xff1a;运行&#xff0c;没有则会去docker pull 拉去镜像 -it&#xff1a;使用交互方式运行&#xff0c;进…...

别人ping不通我的ip解决方法

方法一&#xff1a;关闭防火墙 方法二&#xff1a;开启ICMPv4 控制面板\系统和安全\Windows Defender 防火墙-----打开高级设置-----入站规则&#xff0c;开启域和专用两个 ICMPv4 方法三&#xff1a;更改共享选项 控制面板\网络和 Internet\网络和共享中心...

Python爬虫基础之Selenium详解

目录 1. Selenium简介2. 为什么使用Selenium&#xff1f;3. Selenium的安装4. Selenium的使用5. Selenium的元素定位6. Selenium的交互7. Chrome handless参考文献 原文地址&#xff1a;https://program-park.top/2023/10/16/reptile_3/ 本文章中所有内容仅供学习交流使用&…...

MS5228数模转换器可pin对pin兼容AD5628

MS5228/5248/5268 是一款 12/14/16bit 八通道输出的电压型 DAC&#xff0c;内部集成上电复位电路、可选内部基准、接口采用四线串口模式&#xff0c;最高工作频率可以到 40MHz&#xff0c;可以兼容 SPI、QSPI、DSP 接口和 Microwire 串口。可pin对pin兼容AD5628。输出接到一个 …...

强化学习基础(2)—常用算法总结

目录 1.Value-Based 2. Policy-Based 参考文献 1.Value-Based Sarsa&#xff08;State-action-reward-state’-action&#xff09;&#xff1a;是为了建立和优化状态-动作(state-action)的价值Q表格所建立的方法。首先初始化Q表格&#xff0c;根据当前的状态和动作与环境进行…...

Web攻防01-ASP应用相关漏洞-HTTP.SYSIIS短文件文件解析ACCESS注入

文章目录 ASP-默认安装-MDB数据库泄漏下载漏洞漏洞描述 ASP-中间件 HTTP.SYS&#xff08;CVE-2015-1635&#xff09;1、漏洞描述2、影响版本3、漏洞利用条件4、漏洞复现 ASP-中间件 IIS短文件漏洞1、漏洞描述2、漏洞成因:3、应用场景&#xff1a;4、利用工具&#xff1a;5、漏洞…...

入门小白拥有服务器的建议

学习网络知识 当我们拥有了一台服务器以后,需要提前准备学习一些网络、服务器、互联网方便的知识, 以备在后续学习工作中使用。 建议的网络知识学习清单: 1. 网络基础知识:包括网络拓扑结构、协议、IP地址、子网掩码、网关等基础概念。 2. 网络安全:包括网络攻击类型、防…...

Spring源码解析——事务增强器

正文 上一篇文章我们讲解了事务的Advisor是如何注册进Spring容器的&#xff0c;也讲解了Spring是如何将有配置事务的类配置上事务的&#xff0c;实际上也就是用了AOP那一套&#xff0c;也讲解了Advisor&#xff0c;pointcut验证流程&#xff0c;至此&#xff0c;事务的初始化工…...

JAVA发送消息到RabbitMq

项目中&#xff0c;作为生产者自定义消息发送到RabbitMq。 1.引入rmq依赖 <!-- rabbitmq 依赖 --><dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>5.9.0</version></dependen…...

Python 函数(lambda 匿名函数、自定义函数、装饰器)基本使用指南

Python 函数 函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段 lambda 匿名函数 对于单行函数&#xff0c;使用 lambda 表达式可以省去定义函数的过程&#xff0c;让代码更加简洁&#xff1b; 对于不需要多次复用的函数&a…...

第五届芜湖机器人展,正运动助力智能装备“更快更准”更智能!

■展会名称&#xff1a; 第十一届中国(芜湖)科普产品博览交易会-第五届机器人展 ■展会日期 2023年10月21日-23日 ■展馆地点 中国ㆍ芜湖宜居国际博览中心B馆 ■展位号 B029 正运动技术&#xff0c;作为国内领先的运动控制企业&#xff0c;将于2023年10月21日参加芜湖机…...

JVM八股文

1.JVM的内存结构&#xff1f; 2.OOM是什么&#xff0c;怎么排查&#xff1f; 3.请解释四种引用是什么意思有什么区别&#xff1f; 4.GC的回收算法有哪些&#xff1f; 5.怎么判断对象是否存活&#xff1f; 1.什么是JVM内存结构 jvm将虚拟机分为5大区域&#xff0c;程序计数器、…...

代码随想录算法训练营第二十四天丨 回溯算法part02

216.组合总和III 思路 本题就是在 [1,2,3,4,5,6,7,8,9] 这个集合中找到和为n的k个数的组合。 相对于77. 组合 (opens new window)&#xff0c;无非就是多了一个限制&#xff0c;本题是要找到和为n的k个数的组合&#xff0c;而整个集合已经是固定的了[1,...,9]。 本题k相当于…...

【Python机器学习】零基础掌握AgglomerativeClustering聚类

如何解决城市规划问题? 城市规划者们面临一个复杂问题:如何合理地规划土地,使商业、居民、公园和其他设施互相便利,同时又不互相干扰?解决这个问题不仅需要对土地进行精准的分类,还要考虑到土地之间的相互关系。 借助层次聚类算法(Agglomerative Clustering),规划者…...

uniapp小程序中给web-view页面添加授权弹窗(使用cover-view组件覆盖实现该功能)

效果图&#xff1a; web-view是承载网页的容器。会自动铺满整个小程序页面&#xff0c;个人类型的小程序暂不支持使用。 再看下面一个提示&#xff1a; 每个页面只能有一个 web-view&#xff0c;web-view 会自动铺满整个页面&#xff0c;并覆盖其他组件。 也就是说&#xff0c;…...

2023年全球及中国CGT CDMO市场发展现状分析:CGT 渗透率有效助力CGT CDMO快速发展[图]

与传统药物相比&#xff0c;CGT的外包服务更注重活体开发过程&#xff0c;如质粒、病毒、细胞的生产及纯化。标准化、规模化的工艺流程对最终制备的产品起到重要影响&#xff0c;是获取及制备能够满足临床需求的高质量CGT产品的关键。 CGT CDMO服务内容 资料来源&#xff1a;共…...

上抖音热搜榜需要做哪些准备?

要想在抖音上获得高曝光&#xff0c;首先需要了解抖音热搜榜的算法和规则。抖音热搜榜的排名主要取决于作品的点赞数、评论数、分享数和播放量。其中&#xff0c;播放量是影响排名的关键因素。因此&#xff0c;在创作作品时&#xff0c;要注重提高作品的播放量。此外&#xff0…...

LDA代码训练报错记录

1、AttributeError: ‘CountVectorizer‘ object has no attribute ‘get_feature_names‘ 代码内容&#xff1a; tf_feature_names tf_vectorizer.get_feature_names()报错信息 AttributeError: CountVectorizer object has no attribute get_feature_names报错解析&#…...

【吞噬星空】爽翻,徐欣喜提永恒之体,罗峰秒杀败类,阿特金磕头认错

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 吞噬星空动画第89集终于更新了&#xff0c;阿特金三大巨头的好日子到头了&#xff0c;从他们对徐欣出手的那一刻&#xff0c;就已经有取死之道。如今罗峰强势回归&#xff0c;上演复仇戏码&#xff0c;让大家看…...