学习空间转换-3D转换

1.什么是空间转换?

使用的是transform属性实现元素在空间内的位移,旋转,缩放等效果。

空间:是从坐标轴角度定义的。x,y,z三条坐标轴构成的一个立体空间,Z轴位置与视线方向相同。

所以空间转换也被叫做3D转换

 语法:

transform:translate3d(x,y,z);
transform:translateX(值);
transform:translateY(值);
transform:translateZ(值);
里面的值可以是正数也可以是负数
可以是像数单位值,也可以是百分比。

2.视距

perspective属性实现透视效果。在我们的现实生活中如果一个人慢慢的从远走到我目前,那么整个人也就慢慢变大,但他不是真正意义上面的变大,而是对于我们的眼球他更近了,也就更大了。也就是我们常说的近大远小。

属性:perspective。一般放到body属性中。

它的取值一般是800-1200。值越小,盒子的变换会比较猛烈。也就是说,值越小,离眼球的距离就越近。

作用:也就是在实现空间转换的时候,为元素添加近大远小,近实远虚的视觉效果。

3.空间旋转

属性:rotate实现元素空间旋转的效果。

语法:

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 开启视距 */
            perspective: 800px;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: aqua;
            margin: 100px auto;
            transition: all 8s;
        }

        .box:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

自定轴位置

语法:

route3d(x,y,z,角度度数);用来设置自定义旋转轴的位置以及旋转的角度
x,y,z的取值为0-1之间的数字

4.立体呈现

属性

transform-style:preserve-3d;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 800px;
        }
        .father {
            width: 20px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
            /* 设置3D转换,必须给父盒子设置3D呈现 */
            transform-style:preserve-3d ;
            transition: all .3s;
        }

        .father div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .father .son1 {
            background-color: red;
            transform: translateZ(100px);
        }
        .father .son2 {
            background-color: blue;
        }

        .father:hover {
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</body>
</html>

5.案例-3D导航

3d

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 600px;
        }

        .father {
            width: 200px;
            height: 50px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all .3s;
        }

        .father div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .son1 {
            background-color: aqua;
            transform: translateZ(25px);
        }

        .son2 {
            background-color: blueviolet;
            transform: translateY(-25px) rotateX(90deg);
        }

        .father:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">首页</div>
        <div class="son2">index</div>
    </div>
</body>

</html>

注意:本文章是笔者的学习笔记,如果您在浏览或者运行代码的时候发现了问题,还请您在评论区留言,笔者在看到后会在第一时间解决,谢谢。

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

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

相关文章

docker+awk=无敌?!

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 dockerawk无敌&#xff1f;&#xff01; 前言需求分析容器间通过容器名称访问脚本实现一键部署命令解释 前言 当今软件开发的世界充满了数据&#xff0c;而 Docker 则是许多开发者首选的容器化解决方…

嵌入式学习55-ARM4(ADC和I²C)

1、什么是ADC,模拟量和数字量有什么特点&#xff1f; ADC&#xff1a; …

GhostNetV3:探索紧凑型模型的训练策略学习笔记

代码地址&#xff08;coming soon&#xff09;&#xff1a;Efficient-AI-Backbones/ghostnetv3_pytorch at master huawei-noah/Efficient-AI-Backbones GitHub 论文地址&#xff1a;2404.11202v1.pdf (arxiv.org) 紧凑型神经网络是专门为边缘设备上的应用而设计的&#xff0…

linux离线安装mysql

一、下载mysql 地址&#xff1a;MySQL 这里选择64为还是32为要根据操作系统来 uname -m 二、上传解压配置mysql 使用root账户登录linux服务器&#xff0c;在opt文件下创建mysql文件夹 cd /opt sudo mkdir mysql 使用Xftp上传mysql压缩包到此文件夹下(自行决定路径) cd mysql/…

Unity Editor编辑器扩展之创建脚本

前言 既然你看到这篇文章了&#xff0c;你是否也有需要使用代码创建脚本的需求&#xff1f;使用编辑器扩展工具根据不同的表格或者新增的内容去创建你想要的脚本。如果不使用工具&#xff0c;那么你只能不断去修改某个脚本&#xff0c;这项工作既繁琐也浪费时间。这个时候作为程…

蓝桥杯第十五界软件测试线下省赛题目分析及解决

PS 需要第十五界蓝桥杯被测系统或者功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试 题目1&#xff1a;功能测试 题目描述 ​ 某物流公司的货运收费标准根据重量、距离和节假日三个因素来确定。如…

【介绍下LeetCode的使用方法】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

1.为什么选择Vue框架

参考&#xff1a;百战程序员 为什么选择Vue框架 Vue是什么&#xff1f; 渐进式 JavaScript 框架&#xff0c;易学易用&#xff0c;性能出色&#xff0c;适用场景丰富的 Web 前端框架 为什么要学习Vue Vue是目前前端最火的框架之一Vue是目前企业技术栈中要求的知识点Vue可以…

Lesson4--栈和队列

【本节目标】 1.栈 2.队列 3.栈和队列面试题 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守后进先出 LIFO &…

vue快速入门(三十五)组件通信-父传子

注释很详细&#xff0c;直接上代码 上一篇 新增内容 父组件传值子组件接收父组件传来的数据 源码 App.vue <template><div id"app"><!-- :item"item"为将item的值传递给MyTest组件 --><MyTest v-for"item in roles" :key&q…

【双曲几何】圆盘上的三角形概念

目录 一、说明二、对偶三角形概念2.1 反演关系2.2 对偶关系2.3 找出三角形的对偶三角形 三、正交三角形概念3.1 通过对偶三角形&#xff0c;找到垂心3.2 正交三角形的概念3.3 中心射影点的概念 四、后记 一、说明 本文对双曲空间的三角形进行分析&#xff0c;本篇首先给出&am…

(vue)el-select选择框加全选/清空/反选

(vue)el-select选择框加全选/清空/反选 <el-form-item label"批次"><el-selectv-model"formInline.processBatch"multiplecollapse-tagsfilterableplaceholder"请选择"style"width: 250px"no-data-text"请先选择企业、日…

基于docker的开发者集成环境

docker-compose一键部署开发者环境。 常见的中间件&#xff1a;nginx, mysql, redis, mongo, rabbitmq, nacos, rocketmq, zookeeper等。 GIthub项目地址 1. 下载项目&#xff1a;git clone https://github.com/xhga/docker-develop-env.git 2. 进入文件夹&#xff1a;cd d…

实例分割——苹果数据集

一、重要性及意义 重要性&#xff1a; 提升农业生产效率&#xff1a;通过自动化检测和分割技术&#xff0c;可以快速准确地识别出图像中的苹果&#xff0c;进而实现自动化的采摘、计数和品质评估。这极大地提高了农业生产的效率&#xff0c;减少了人工劳动成本。 优化资源配置…

【网站项目】高校毕业论文管理系统小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

力扣:LCR 022. 环形链表 II

力扣&#xff1a;LCR 022. 环形链表 II 给定一个链表&#xff0c;返回链表开始入环的第一个节点。 从链表的头节点开始沿着 next 指针进入环的第一个节点为环的入口节点。如果链表无环&#xff0c;则返回 null。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链…

为了机器学习量化策略,我标注了两万条数据

题图&#xff1a;芝加哥大学海德公园。芝大是经济学重镇&#xff0c;其学者开创了著名的芝加哥经济学派&#xff0c;共产生了 100 位诺奖、10 位菲尔兹奖、4 位图灵奖。今天量化人追逐的 Alpha&#xff0c; 最早就来自于 Michael Jessen 在芝大时的博士论文。 很多人对基于机器…

Git - 在PyCharm/Idea中集成使用Git

文章目录 Git - 在PyCharm/Idea中集成使用Git1.新建GitHub仓库2.将仓库与项目绑定3.在PyCharm中使用Git4.新建Gitee仓库5.将仓库与项目绑定6.在IDEA中使用Git Git - 在PyCharm/Idea中集成使用Git 本文详细讲解了如何在 PyCharm 或 Idea 中配置 Gitee 或 GitHub 仓库&#xff0…

稀碎从零算法笔记Day53-LeetCode:不同路径 II

稀碎系列有点更不动(更多是自己懈怠了) 题型&#xff1a;矩阵、模拟 链接&#xff1a;63. 不同路径 II - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &…

DQ-DETR: DETR WITH DYNAMIC QUERY FOR TINY OBJECTDETECTION 学习笔记

论文地址&#xff1a;https://arxiv.org/pdf/2404.03507.pdf 此DQ-DETR与IDEA提出的同名&#xff0c;该文主要集中于小目标的检测 尽管之前的类似DETR的方法在通用目标检测中取得了成功&#xff0c;但在小目标检测方面仍然具有挑战性&#xff0c;因为目标 Query 的位置信息并未…