CSS3 立体 3D 变换


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍CSS3 立体 3D 变换
    • 💎1 坐标轴
    • 💎2 perspective 透视视图
      • 🌹2.1 perspective-origin
    • 💎3 旋转
    • 💎5 transform-style 语法
    • 💎6 transform-origin
    • 💎7 平移
    • 💎8 缩放

✍CSS3 立体 3D 变换

在这里插入图片描述

💎1 坐标轴

什么是3D的场景呢?2D场景,在屏幕水平和垂直的交叉轴线x轴和y轴。

3D场景,在垂直于屏幕的方法,相对于3D多出个Z轴。

Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向。

在这里插入图片描述

CSS3中的3D变换主要包括以下几种功能函数:

3D位移

  • CSS3中的3D位移主要包括translateZ()和translate3d(x,y,z)两个功能函数;

3D旋转

  • CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
  • 再2d中,只有 rotate(30deg)

3D缩放

  • CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;

3D透视视图

  • CSS3中的3D转换元素定义透视视图,主要包括perspective(n)函数或者perspective属性;

💎2 perspective 透视视图

perspective 透视视图也可以就叫做视距、景深。

如果没有定义 perspective 视距,就相当于没有近大远小。

满足下面两个设置,才会产生近大远小的感观:

  • 设置 perspective 视距
  • 必须在 z 轴上面有变换(平移、旋转、缩放)

在这里插入图片描述

程序中实现的方法 perspective 元素距离,视线的距离(物体和眼睛的距离越小,近大远小的效果越明显):

  • perspective: 1200px;(在父盒子中使用)
  • transform: perspective(1200px);(在子元素中使用)

两个都设置会发生冲突,建议只设置父元素,通常的数值在900~1200之间。

如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉。

🌹2.1 perspective-origin

perspective-origin 属性:定义一个观察者的角度。

默认情况下,坐标系的 Z 轴位于父元素的水平中线与垂直中线的交界处。

我们可以通过设置 perspective-origin 来调整位置,使用绝对定位样式移动元素时,此时坐标系的 X 轴和 Y 轴以设置了相对定位的祖先元素的中点为原点。

在这里插入图片描述

要注意的是,在调整 z 轴的位置的时候,用户的视角也会跟着发生变化。

perspective-origin 属性可以定义一个观察者的角度,俯视、仰视、左右侧视等等。

perspective-origin 属性有两个值,取值有3种方式:长度、百分比、方位单词。

取值:

  • perspective-origin: x轴距离 y轴距离;
  • perspective-origin: x轴百分比 y轴百分比; 默认观察源为 50% 50%,父元素的中心点
  • perspective-origin: 方位单词1 方位单词2; 方位单词:top、bottom、center、left、right
  • 若只设置了一个值,则第二个值默认为 50%

💎3 旋转

https://virtual.bbcmic.ro/?disc1=elite.ssd&autoboot

rotateX|Y|Z()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

左手法则:

transform: rotateX(30deg); /*在3D空间内,沿着x轴顺时针旋转*/
transform: rotateY(30deg); /*在3D空间内,沿着y轴顺时针旋转*/
transform: rotateZ(30deg); /*在3D空间内,沿着z轴顺时针旋转*/

rotate3d(1,1,1, 30deg); /*3d绘制软件,它自动生成向量坐标*/
/*
x,y,z的取值为0~1
rotate3d(1,1,1, 30deg) --------->表示x,y,z与30deg的乘积,rotateX(30deg)、rotateY(30deg)、rotateZ(30deg)
rotate3d(0,0,1, 30deg) --------->表示x,y,z与30deg的乘积,rotateX(0)、rotateY(0)、rotateZ(30deg)
*/

如果需要复杂的3d效果,一般都会使用3D绘制软件,3dmax,uity ----> .obj ----> 3d图形

怎么查看旋转的3d效果,一般会开启perspective视距,有一个远小近大。

💎5 transform-style 语法

使被转换的子元素保留其 3D 转换,给需要 3D 变换的父(上一级或者上上级)元素设置

transform-style: flat|preserve-3d;
描述
flat子元素将不保留其 3D 位置。2D舞台
preserve-3d子元素将保留其 3D 位置。3D舞台

transform-style: preserve-3d 能使在同一位置的元素中心点交汇。自然 flat 值就是不能够交汇咯。

只要CSS绘制3D图形,这个transform-style必须加上,perspective可以选择性的添加。

💎6 transform-origin

描述
x-axis定义视图被置于 X 轴的何处。可能的值:left、center、right、length、%
y-axis定义视图被置于 Y 轴的何处。可能的值:top、center、bottom、length、%
z-axis定义视图被置于 Z 轴的何处。可能的值:length

示例:

/* 
    将 z轴的原点坐标设置为+50px,相当于这时候原点坐标向我们眼睛靠近50px
    这时候加上景深的100px,相当于我们距离屏幕为150px了。
*/
transform: perspective(100px);
transform-origin: 50% 50% 50px;

transform-origin其实和视距也是有关系的。

💎7 平移

translate()方法,根据左(X 轴)和顶部(Y 轴)位置给定的参数,从当前元素位置移动。

transform: translateX(30px);
transform: translateY(30px);
transform: translateZ(30px);

translate3d(x,y,z);

💎8 缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数,当scale3d()中x轴和y轴同时为1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小

scale3d(sx,sy,sz)

  • sx:横向缩放比例
  • sy:纵向缩放比例
  • sz:Z轴缩放比例

scaleZ(s)

  • s:指定元素每个点在Z轴的比例
  • scaleZ(z)是难点,指的z轴方向上的纵深(视距),并不会在z轴方向加厚元素,需要在父元素设置,然后观察子元素位移距离的增加
/*为什么它不会产生任何效果?*/
transform: perspective(100px) scaleZ(2);
原因就是没有产生近大远小,至少来说,必须要通过其他的变形函数产生近大远小才可以看到效果

正确示例:

transform: perspective(100px) scaleZ(2) translateZ(1px);

注意:scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果

scaleZ需要配合 perspective 和 rotateX(45deg) 观看效果。

.box {
    transform-style: preserve-3d;
    perspective: 800px;
}

.center {
    transform: scaleZ(10) rotateX(45deg);
}

/*or*/

.box {
    transform-style: preserve-3d;
}
.center {
    transform: perspective(800px) scaleZ(10) rotateX(45deg);
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

cesium 平滑显示billboard 透明度

描述:加载billboard的时候,要么是显示,要么是隐藏,不能平滑的显示,有个从不显示到显示的过程 解决方案:创建billboard的时候给一个color,颜色为(255,255,255),透明度从0-1 let opaci…

CSS设置内外边距

目录 内边距(paddingj): 前言: 设置内边距: 外边距(margin): 前言: 设置外边距: 补充(折叠): 内边距(padding)&#…

设计模式-外观模式(Facade)

1. 概念 外观模式(Facade Pattern)是一种结构型设计模式,它提供了一个统一的接口,用于访问子系统中的一群接口。外观模式的主要目的是隐藏系统的复杂性,通过定义一个高层级的接口,使得子系统更容易被使用。…

秀米、135、蚂蚁编辑器如何为推文添加附件

秀米、135、蚂蚁编辑器作为第三方的公众号图文排版工具,给从事运营和编辑工作的同学提供了更多的排版选择。不同于公众号自家的编辑器,这些第三方编辑器脱离了微信的直接支持,在很多排版操作上,还是有很多操作不一样的地方。 公众…

UE C++ 学习

UBT(虚幻编译工具(UnrealBuildTool))和UHT虚幻头工具(UnrealHeaderTool) UE有一组用于自动执行编译虚幻引擎过程的工具,包括 UBT和UHT(以及其他工具)。实现这一套工具的目…

R语言 多组堆砌图

目录 数据格式 普通绘图 添加比例 R语言 堆砌图_r语言堆砌图-CSDN博客 关键点在于数据转换步骤和数据比例计算步骤&#xff0c;然后个性化调整图。 ①data <- melt(dat, id.vars c("ID"))##根据分组变为长数据 ②#计算百分比## data2 <- ddply(data, …

Vue 3 中的哪些新特性对提升开发效率最有帮助?

Vue 3 引入了一系列新特性&#xff0c;旨在提升开发效率和改善开发体验。以下是一些对提升开发效率最有帮助的特性&#xff1a; Composition API: Composition API 允许开发者更灵活地组织代码&#xff0c;使得逻辑复用和维护变得更加容易。通过将相关功能的代码组织在一起&…

【Leetcode】2923. 找到冠军 I

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 一场比赛中共有 n n n 支队伍&#xff0c;按从 0 0 0 到 n − 1 n - 1 n−1 编号。 给你一个下标从 0 0 0 开始、大小为 n ∗ n n * n n∗n 的二维布尔矩阵 g r i d grid gr…

【cmake安装】研发环境搭建之cmake安装

背景 因为项目需求&#xff0c;需要家里的Win10 PC安装Ubuntu 20.04虚拟机并搭建编译环境&#xff0c;需要安装cmake编译环境 直接命令安装即可 sudo apt install cmake安装成功后&#xff1a; 3.16版本暂时也够用了

院子里种点什么树风水好呢?

植物本身是一个丰富的生活领域&#xff0c;有着强烈的视觉暗示。其实&#xff0c;在家中养植物&#xff0c;是有许多好处的&#xff0c;它不仅能够装点庭院的环境让家更美丽&#xff0c;还能调节室内的空气质量&#xff0c;对家人的运势也有着非常大的帮助。 不过&#xff0c;并…

向量数据库Chroma学习记录

一 简介 Chroma是一款AI开源向量数据库&#xff0c;用于快速构建基于LLM的应用&#xff0c;支持Python和Javascript语言。具备轻量化、快速安装等特点&#xff0c;可与Langchain、LlamaIndex等知名LLM框架组合使用。 二 基本用法 1 安装 安装方式非常简单&#xff0c;只需…

公司能监控员工电脑屏幕吗

公司能监控员工电脑屏幕吗&#xff1f; 当然可以&#xff01; 公司需要在工作时间去监控员工电脑的。 电脑属于公司财产&#xff0c;公司对于员工在工作期间的上网行为有监控的权利和职责&#xff0c;可以监控员工在工作期间的信息交流&#xff0c;并且对他们的上网行为进行…

为什么负载电流增加时电源电压会下降?

原文来自微信公众号&#xff1a;工程师看海&#xff0c;与我联系&#xff1a;chunhou0820 看海原创视频教程&#xff1a;《运放秘籍》 大家好&#xff0c;我是工程师看海。 在以前的文章中我总是提到当负载电流增加时&#xff0c;电源的输出电压会下降&#xff0c;很多同学在实…

【Java】第十五届蓝桥杯JavaB组第一道填空题

&#xff03;【Java】第十五届蓝桥杯JavaB组第一道填空题 大家好 我是寸铁&#x1f44a; 总结了一篇【Java】第十五届蓝桥杯JavaB组第一道填空题文章 喜欢的小伙伴可以点点关注 &#x1f49d; Java B组 第一道填空题题解如下:

云服务器租用一年、1个月优惠价格表,阿里/腾讯/京东/华为云

现在租一个服务器多少一个月&#xff1f;优惠价格低至3.8元1个月&#xff0c;租用一个月云服务器收费价格表&#xff1a;阿里云和腾讯云2核2G3M服务器优惠价格61元一年&#xff0c;折合一个月5元&#xff0c;京东云轻量云主机5.8元一个月&#xff0c;华为云服务器优惠价格3.8元…

vue中的treeselect下拉框显示不全的解决办法

:appendToBody“true” z-index“9000” 如图&#xff1a;页面中显示的下拉框信息展示不全&#xff0c;就看不见了&#xff0c;也没有滚动条 解决办法&#xff1a;在代码中添加属性【:appendToBody“true” z-index“9000”】 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺…

安全风险攻击面管理如何提升企业网络弹性?

从研究人员近些年的调查结果来看&#xff0c;威胁攻击者目前非常善于识别和利用最具有成本效益的网络入侵方法&#xff0c;这就凸显出了企业实施资产识别并了解其资产与整个资产相关的安全态势的迫切需要。 目前来看&#xff0c;为了在如此复杂的网络环境中受到最小程度上的网络…

12V降5V5A同步降压芯片WT6023A

12V降5V5A同步降压芯片WT6023A 在今日的产品介绍中&#xff0c;我们将重点讨论一款性能卓越的DC/DC转换器——WT6023A。此款转换器采用抖动频率模式控制架构&#xff0c;以高效、单片同步的方式执行降压操作。其设计能够持续承载达6安培的负载&#xff0c;并且展示出优异的线路…

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet 1.8.3 卷积神经网络近…

configmap里一堆\n怎么解决

1. 问题 在编辑configmap的时候偶尔后遇到configmap里的内容变为一坨&#xff0c;出现一堆\n的情况&#xff0c;如下图&#xff1a; 2. 原因 这个问题是configmap里有一些制表符&#xff08;Tab&#xff09;而不是四个空格(K8S的yaml文件只允许有空格)导致的。 Tips&#xf…