3D 转换

news2024/11/18 5:26:54

1,3D的特点:

近小远大

物体后面遮挡不可见

2,3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向

transform:translateX(100px):仅仅是在x轴上移动

transform:translateY(100px):仅仅是在Y轴上移动

transform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位),有了透视,就能看到translateZ引起的变化了

transform:translate3d(x,y,z)

 3,透视 perspective

4,3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转

transform:rotateX(45deg):沿着x轴正方向旋转45度

transform:rotateY(45deg):沿着y轴正方向旋转45度

transform:rotateZ(45deg):沿着z轴正方向旋转45度

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转

x y z是表示旋转轴的矢量
transform:rotate3d(1,1,45deg) 沿着独角线旋转45deg

5,3D呈现 transform-style(重要)

控制子元素是否开启三维立体环境

transform-style:flat                    默认的不开启

transform-style:preserve-3d     子元素开启立体空间

代码写给父级,但是影响的是子盒子 

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

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

相关文章

Redis冲冲冲——缓存三兄弟:缓存击穿、穿透、雪崩

目录 引出缓存击穿缓存穿透缓存雪崩 总结 引出 谈谈redis的击穿、穿透、雪崩。 缓存击穿 缓存击穿:redis中没有,但是数据库有 顺序:先查缓存,判断缓存是否存在;如果缓存存在,直接返回数据;如果…

考研高数(共轭根式)

1.定义 共轭根式:是指两个不等于零的根式A、B,若它们的积AB不含根式,则称A、B互为共轭根式。 共轭根式的一个显著特点是通过相乘能把根号去掉,这是很有帮助的 2.常用的共轭根式 3.例题 1)求极限 2)证明…

第九节HarmonyOS 常用基础组件21-ImageAnimator

1、描述 提供帧动画组件来实现逐帧播放图片的能力&#xff0c;可以配置需要播放的图片列表&#xff0c;每张图片可以配置时长。 2、接口 ImageAnimator() 3、属性 参数名 参数类型 描述 images Array<ImageFrameInfo> 设置图片帧信息集合&#xff0c;每一帧的帧…

#pycharm|插件#pycharm提高生产力的工具,自用顺手,推荐一波

aiXcoder Code Completer aiXcoder 结合上下文为用户生成完整且更符合实际场景的代码行或者代码块&#xff0c;同时提供生成代码、自动生成单元测试、Bug自动修复、代码解释、生成注释等功能。 CodeGeeX 代码极X CodeGeeX是一款基于LLMs的强大智能编程助手。提供代码生成/补全…

bluecms 代码审计

一 环境准备 BlueCMS v1.6 sp1 phpstudy php5.6.9apachemysql 二 环境搭建 phpstudy 1.把下好的BlueCMS源码文件bluecms_src放到phpStudy的WWW目录下 2.访问本地&#xff1a;http://localhost/bluecms_src/&#xff0c; 能看到项目文件 3.访问地址&#xff1a;http://loca…

解决:ModuleNotFoundError: No module named ‘tiktoken’

解决&#xff1a;ModuleNotFoundError: No module named ‘tiktoken’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named tiktoken背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff0c;直接安装方法二&#xff0c;手动下载安装方法三&#xff0…

C++进阶(八)红黑树

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、红黑树的概念二、红黑树的性质三、红黑树结构四、红黑树的插入操作1、情况一2、情况二3、…

Windows 10中哪些文件或文件夹可以删除,哪些不可以?看了这篇就大彻大悟了

在清理计算机上的存储空间后,我们经常深入研究几个系统生成的文件,除了包含我们数据的常规文件和文件夹。如果你甚至错误地删除了文档、视频、音频文件或图像,你仍然可以恢复它。而且,它不会对你的操作系统产生任何影响。 然而,如果你不小心删除了一个错误的系统相关文件…

【RuoYi-Vue-Plus学习】项目初始化时将sql导入数据库出现Finished with error解决方法之一

将sql导入数据库出现Finished with error&#xff0c;文末是最终解决方法。 问题描述&#xff1a;sql导入出现Finished with error 解决方法探索过程&#xff1a; 1&#xff09;参考链接2和3&#xff0c;在mysql的bin目录下输入以下指令连接数据库 mysql -h localhost -u ro…

2024西湖论剑misc方向wp

每年的misc都是最无聊坐牢的 数据安全-easy_tables import pandas as pd import hashlib from datetime import datetimeusers_df pd.read_csv(users.csv) permissions_df pd.read_csv(permissions.csv) tables_df pd.read_csv(tables.csv) actionlog_df pd.read_csv(acti…

一段比较简单的人工智能自动做模型的程序

一段比较简单的人工智能自动做模型的程序 一、人工智能自动做模型的程序通常包括以下几个步骤&#xff1a;二、人工智能自动做模型的程序示例&#xff1a;三、这只是一个简单的示例&#xff0c;实际应用中可能需要更复杂的数据预处理、特征工程、模型调参等步骤。但这个示例程序…

智能指针——浅析

智能指针 本人不才&#xff0c;只能将智能指针介绍一下&#xff0c;无法结合线程进行深入探索 介绍及作用 在异常产生进行跳转时&#xff0c;通过栈帧回收进行内存释放&#xff0c;防止内存泄漏 基于RAII思想可以创建出只能指针 RAII(Resource Acquisition Is Initializatio…

HTML标签 - 1

文章目录 HTML标签简介HTML书写规范常见网页制作软件常用标签结构标签排版标签标题标签容器标签字体标签文本格式化标签列表标签图片标签 HTML标签 简介 一门使用标记标签来描述网页&#xff0c;展示信息给用户的语言。 超文本标记语言&#xff08;Hyper Text Markup Langua…

力扣hot100 数据流的中位数 大小根堆

Problem: 295. 数据流的中位数 文章目录 思路复杂度&#x1f496; Code 思路 &#x1f468;‍&#x1f3eb; 参考 大根堆维护较小值&#xff08;堆顶即中位数&#xff09;&#xff0c;小根堆维护较大值&#xff08;堆顶可能是中位数之一&#xff09;维护小堆长度较长&#x…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-6 绘制几何图形

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>绘制几何图形</title> </head><body><canvas id"canvas" width"250" height"150" style"border: 1px b…

【数据结构 01】栈

一、原理 栈通常从数据结构和内存空间两个角度解释&#xff0c;从数据结构的角度&#xff0c;栈是一种线性结构表&#xff0c;只允许在固定的一端进行插入和删除元素&#xff0c;从内存空间角度&#xff0c;操作系统为函数和变量分配的内存空间通常在栈区&#xff0c;但是无论…

【AI绘画】stable diffusion原理解读,通俗易懂,直接喂到你嘴里!!!

手把手教你入门绘图超强的AI绘画&#xff0c;用户只需要输入一段图片的文字描述&#xff0c;即可生成精美的绘画。给大家带来了全新保姆级教程资料包 &#xff08;文末可获取&#xff09; 文章目录 一、前言&#xff08;可跳过&#xff09;二、stable diffusion 1.clip2.diffus…

设计模式之框架源码剖析(实战+图解)

Java设计模式 1&#xff0c;概述 随着软件开发人员人数的增多&#xff0c;一些公司急需一些高端人才。作为一个高端人才&#xff0c;设计面向对象软件是必不可少的能力&#xff0c;而软件设计是需要很深的功力&#xff0c;设计模式就要求你必须掌握。 2&#xff0c;本章特色…

Spring结合工厂模式

学习设计模式&#xff0c;不要进入一个误区生搬硬套&#xff0c;它是一种编程思想&#xff0c;结合实际使用&#xff0c;往往设计模式是混合使用的 工厂模式 核心本质&#xff1a;使用工厂统一管理对象的创建&#xff0c;将调用者跟实现类解耦 我这里使用Spring容器的支持&am…

【C项目】顺序表

简介&#xff1a;本系列博客为C项目系列内容&#xff0c;通过代码来具体实现某个经典简单项目 适宜人群&#xff1a;已大体了解C语法同学 作者留言&#xff1a;本博客相关内容如需转载请注明出处&#xff0c;本人学疏才浅&#xff0c;难免存在些许错误&#xff0c;望留言指正 作…