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

news2024/11/13 9:38:25

导语

在上一章节中,我们分享了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指定元素背面不可见

在这里插入图片描述


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

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

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

相关文章

职场中,如何更高效地分析和解决问题(一)

要在职场取得成功&#xff0c;必须掌握多种技能。这些技能大致可分为三类&#xff1a; 一是职能性技能&#xff0c;二是分析和解决问题的技能&#xff0c;三是处理人际关系的技能。 无论在生活中还是工作中&#xff0c;我们都会面临各种问题&#xff0c;有些问题可能简单易处…

Avalonia 实现跨平台的视频聊天、屏幕分享(源码,支持Win、银河麒麟、统信UOS)

现在最火的.NET跨平台UI框架莫过于Avalonia了。Avalonia 基于.NET Core&#xff0c;因此它可以运行在任何支持.NET Core的平台上。之前基于CPF跨平台UI框架写过一个视频聊天的demo&#xff0c;而现在看来Avalonia是大势所趋&#xff0c;于是&#xff0c;我再写一个Avalonia版本…

TP5.1 导出excel文件

在 ThinkPHP 5.1 中引入 PHPExcel&#xff08;现在已被官方弃用&#xff0c;推荐使用 PhpSpreadsheet&#xff09;时&#xff0c;可以按照以下步骤进行操作&#xff1a; 在 composer.json 文件中添加 PHPExcel&#xff08;PhpSpreadsheet&#xff09;的依赖项。找到 require 部…

告别单调的列表页,探索JVS低代码列表页设计的新思路

列表页是什么&#xff1f; 列表页是管理平台中的基础页面&#xff0c;核心的逻辑是实现数据的增删改查&#xff08;CRUD&#xff09;&#xff0c;列表页核心的几个要素&#xff1a;页面内容的数据展示、查询条件、页面按钮及按钮触发的逻辑。 列表页配置 具备应用配置权限的…

利用Python turtle绘制中国结附源码

一、中国结 01 平安喜乐 1&#xff09;效果图 import turtle turtle.screensize(600,800) turtle.pensize(10) turtle.pencolor("red") turtle.seth(-45) turtle.fd(102) turtle.circle(-6,180) turtle.fd(102) turtle.circle(6,180) turtle.fd(102) turtle.circle(…

5、函数式编程--方法引用

目录 6. 方法引用6.1 推荐用法6.2 基本格式6.3 语法详解(了解)6.3.1 引用类的静态方法格式使用前提 6.3.2 引用对象的实例方法格式使用前提 6.3.4 引用类的实例方法格式使用前提 6.3.5 构造器引用格式使用前提 6. 方法引用 ​ 我们在使用lambda时&#xff0c;如果方法体中只有…

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka。 大家对开源项目有兴趣、想成为committer,或者工作需要,会从github上获取最新的开源项目源码。本文做一个示例,怎样搭建本地的源码阅读、开发、构建环境。 首先,在github上找到项目的链接,…

OS 进程的描述与控制

目录 前趋图 程序执行 程序顺序执行 程序并发执行 进程 定义 进程控制块 PCB 进程实体 进程 特征 动态性 并发性 独立性 异步性 状态 3 种基本状态 就绪状态 执行状态 阻塞状态 3 种基本状态间的转换 其他状态 创建状态 终止状态 进程 5 种状态及其转换…

创建JUnit4 的TestBase类

Slf4j RunWith(SpringRunner.class) SpringBootTest(classes {TestApplication.class},webEnvironment SpringBootTest.WebEnvironment.RANDOM_PORT) public class TestBase { } 如图&#xff1a;

基于Bert模型的中文语义相似度匹配算法(离线模式)

1、准备中文离线模型 配置文件夹 文件获取方法&#xff1a; 访问官网&#xff1a;https://huggingface.co/bert-base-chinese/tree/main 下载以下文件 2、测试代码 # -*- coding: utf-8 -*- #pip install transformers -i https://mirrors.aliyun.com/pypi/simple/ #pip …

2023年中国机场建设标准、机场数量及机场系统投资完成情况分析[图]

机场&#xff0c;亦称飞机场、空港&#xff0c;较正式的名称是航空站。机场有不同的大小&#xff0c;除了跑道之外&#xff0c;机场通常还设有塔台、停机坪、航空客运站、维修厂等设施&#xff0c;并提供机场管制服务、空中交通管制等其他服务。 机场建设资质等级标准 资料来源…

当遇到修复错误0xc000000e时,你的电脑需要修复。如何在Windows 11/10上修复此错误

恢复错误代码0xc000000e,你的电脑需要修复,表示硬件故障或驱动器配置不正确,并可能伴随不同的错误消息,如: 所需设备未连接或无法访问 无法加载所选条目 由于应用程序丢失或损坏,无法加载所选条目 启动选择失败,因为无法访问所需的设备。 0xC000000E或STATUS_NO_SUCHDEV…

MBR20100CT-ASEMI肖特基MBR20100CT参数、规格、尺寸

编辑&#xff1a;ll MBR20100CT-ASEMI肖特基MBR20100CT参数、规格、尺寸 型号&#xff1a;MBR20100CT 品牌&#xff1a;ASEMI 芯片个数&#xff1a;2 封装&#xff1a;TO-220 恢复时间&#xff1a;&#xff1e;50ns 工作温度&#xff1a;-65C~175C 浪涌电流&#xff1a…

LeetCode //C++ - 427. Construct Quad Tree

427. Construct Quad Tree Given a n * n matrix grid of 0’s and 1’s only. We want to represent grid with a Quad-Tree. Return the root of the Quad-Tree representing grid. A Quad-Tree is a tree data structure in which each internal node has exactly four c…

2023年中国脱硫石膏产量、均价、综合利用量及市场规模分析[图]

脱硫石膏主要成分和天然石膏一样&#xff0c;为二水硫酸钙CaSO42H2O&#xff0c;含量≥93%。脱硫石膏是FGD过程的副产品&#xff0c;FGD过程是一项采用石灰-石灰石回收燃煤或油的烟气中的二氧化硫的技术&#xff0c;其中2022年中国脱硫石膏产量同比增长2.0%&#xff1b;综合利用…

[已解决]llegal target for variable annotation

llegal target for variable annotation 问题 变量注释的非法目标 思路 复制时编码错误&#xff0c;自己敲一遍后正常运行 #** 将垂直知识加入prompt&#xff0c;以使其准确回答 **# prompt_templates { # "recommand":"用户说&#xff1a;__INPUT__ …

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

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

最新JustMedia V2.7.3主题破解版去授权WordPress主题模板

JustMedia主题是一款针对有图片或者视频发布需求的网站量身定制开发的wordpress主题&#xff0c;适合各类图片展示类网站使用。 同时JustMedia主题首次加入了我们WPCOM团队独立自主开发的前端用户中心模块&#xff0c;相比用户中心插件可提供更好的体验效果。 新版用户中心为…

麒麟kylinOS 2303通过模板设置电源

原文链接&#xff1a;麒麟kylinOS 2303上通过模板设置电源 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在麒麟kylinOS 2303上通过模板设置电源的文章&#xff0c;主要通过开机启动脚本实现&#xff0c;开机脚本内容主要为gsettings的设置&#xff0c;关于gestati…

超简单小白攻略:如何利用黑群晖虚拟机和内网穿透实现公网访问

文章目录 前言本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是前排提醒&#xff1a; 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机&#xff1a;1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…