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

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

1.flex布局

也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力,不会产生浮动布局中脱标现象,布局网页更简单,更灵活。
在这里插入图片描述

flex容器属性:

属性描述
display规定用于 HTML 元素的盒类型。
flex-direction规定弹性容器内的弹性项目的方向。
justify-content当弹性项目没有用到主轴上的所有可用空间时,水平对齐这些项目。
align-items当弹性项目没有用到主轴上的所有可用空间时,垂直对齐这些项。
flex-wrap规定弹性项目是否应该换行,若一条 flex 线上没有足够的空间容纳它们。
align-content修改 flex-wrap 属性的行为。与 align-items 相似,但它不对齐弹性项目,而是对齐 flex 线。
flex-flowflex-direction 和 flex-wrap 的简写属性。
flexflex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

flex项目属性:

属性描述
order规定弹性项目相对于同一容器内其余弹性项目的顺序。
flex-grow值为数字,项目相对的扩大程度
flex-shrink值为数字,项目相对的缩小程度
flex-basis值为带单位的长度(如px),flex项目的初始长度
align-self用于弹性项目。覆盖容器的 align-items 属性。

在这里插入图片描述
在这里插入图片描述

2.过渡transition属性

CSS 过渡允许在给定的时间内平滑地改变属性值。

属性描述
transition简写属性,用于将四个过渡属性设置为单一属性。
transition-delay规定过渡效果的延迟(以秒计)。
transition-duration规定过渡效果要持续多少秒或毫秒。
transition-property规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function规定过渡效果的速度曲线。

如需创建过渡效果,必须明确两件事:

  • 要添加效果的 CSS 属性
  • 效果的持续时间

注意:如果未规定持续时间部分,则过渡不会有效果,因为默认值为 0。

3.2D转换transform属性

在这里插入图片描述

通过使用 CSS transform 属性,可以利用以下 2D 转换方法:

方法描述特点
translate()从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)
rotate()根据给定的角度顺时针或逆时针旋转元素正值顺时针,负值逆时针
scale()增加或减少元素的大小(根据给定的宽度和高度参数)可单独写scaleX()scaleY()
skew()使元素沿 X 和 Y 轴倾斜给定角度可单独写skewX()skewY()
matrix()把所有 2D 变换方法组合为一个参数如下:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

在这里插入图片描述
此处使用百分比取值法时,可以比较容易实现盒子水平垂直居中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
旋转会改变坐标轴向,多重转换以第一种转换的坐标轴为准
在这里插入图片描述
注意使用多个属性时,属性值要使用复合属性,即中间用空格隔开

4.3D转换transform属性

在这里插入图片描述

函数描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

在这里插入图片描述
translate3d写法必须写满三个数。 因为电脑是平面,所以默认状态下无法看到z轴平移效果。得使用以下视距属性:
在这里插入图片描述
注意是直接赋值给父级,视距属性范围在800-1200比较符合人的视觉习惯

在这里插入图片描述
每个面都有自己独立的坐标轴,自己旋转后不会影响其他面坐标轴

【记录学习过程的笔记,欢迎大家一起讨论,会持续更新】

相关文章:

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

​ 1.flex布局 也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力,不会产生浮动布局中脱标现象,布局网页更简单,更灵活。 flex容器属性: 属性描述d…...

Spring Boot Gradle 项目中使用 @Slf4j 注解

Spring Boot Gradle 项目中,如果想使用 Slf4j 注解来启用日志记录,首先需要添加 Lombok 和 SLF4J 的依赖。可以通过以下步骤来添加它们: 1. 添加 Lombok 依赖 在 build.gradle 文件中添加以下 Lombok 依赖: dependencies {impl…...

FreeRTOS系列---程序正常,但任务无法创建

实验环境 stm32F103RCT6核心板 keil5 vscode stm32cubemx 使用stm32cubemx 问题现场 void my_task_init(void) {xTaskCreate(LED1_Task, "LED1_Task", configMINIMAL_STACK_SIZE, NULL, 1, NULL);xTaskCreate(LED2_Task, "LED2_Task", configMINIMA…...

linux应用:errno、perror、open、fopen

errno errno 是一个全局变量,定义在 头文件中。当系统调用(如 open、read、write 等)或库函数执行失败时,会将一个错误码赋值给 errno。不同的错误码代表不同的错误类型,通过检查 errno 的值,可以判断具体…...

物联网中的气象监测设备具备顶级功能

物联网中的气象监测设备具备顶级功能时,通常集成GPS、数据上报和预警系统,以确保精准监测和及时响应。以下是这些功能的详细说明: 1. GPS定位 精准定位:GPS模块提供设备的精确地理位置,确保数据与具体位置关联&#…...

15-YOLOV8OBB损失函数详解

一、YOLO OBB支持的OBB 在Ultralytics YOLO 模型中,OBB 由YOLO OBB 格式中的四个角点表示。这样可以更准确地检测到物体,因为边界框可以旋转以更好地适应物体。其坐标在 0 和 1 之间归一化: class_index x1 y1 x2 y2 x3 y3 x4 y4 YOLO 在内部处理损失和输出是xywhr 格式,x…...

WHAT - 前端异步事件流处理场景梳理

目录 一、典型场景二、解决方案与技术选型1. 基础异步控制2. 状态管理方案3. 复杂任务调度4. 任务取消机制5. 微任务队列优化 三、最佳实践建议四、工具链推荐 前端异步任务流处理是现代Web开发中常见的需求,尤其在复杂业务逻辑、高交互性应用中不可或缺。以下是常见…...

计算机网络软考

1.物理层 1.两个主机之间发送数据的过程 自上而下的封装数据,自下而上的解封装数据,实现数据的传输 2.数据、信号、码元 码元就是数字通信里用来表示信息的基本信号单元。比如在二进制中,用高电平代表 “1”、低电平代表 “0”&#xff0c…...

安防监控/视频集中存储EasyCVR视频汇聚平台如何配置AI智能分析平台的接入?

EasyCVR安防视频监控平台不仅支持AI边缘计算智能硬件设备的接入,还能快速集成AI智能分析平台,接收来自智能分析平台或设备的AI告警信息,如烟火检测、周界入侵检测、危险区域闯入检测、安全帽/反光衣佩戴检测等。 本文将详细介绍如何在EasyCVR…...

做小程序开发的安全防护全方案

小程序开发安全防护方案 为了确保小程序在开发过程中的安全性,以下是一个全面的防护方案: 1. 需求分析与规划 功能模块分析:明确小程序的功能模块,识别高风险区域如用户登录和支付功能。数据分类分级:将数据分为敏感…...

在Spring Boot项目中导出复杂对象到Excel文件

在Spring Boot项目中导出复杂对象到Excel文件&#xff0c;可以利用Hutool或EasyExcel等库来简化操作。这里我们将详细介绍如何使用Hutool和EasyExcel两种方式来实现这一功能。 使用Hutool导出复杂对象到Excel 首先确保你的pom.xml中添加了Hutool的依赖&#xff1a; <depe…...

从JDBC到数据库连接池:构建高性能Java应用的基石(中篇)

推荐关联阅读&#xff1a;JDBC核心技术解析&#xff1a;从基础连接到ORM演进之路&#xff08;上&#xff09; 一、JDBC的困境与连接池的救赎 1.1 传统JDBC的致命缺陷 在Java应用与数据库交互的原始模式中&#xff0c;开发者通过DriverManager.getConnection()获取数据库连接…...

JavaWeb后端基础(6)

主键返回 例子&#xff1a; /** * 新增员工数据 */ Options(useGeneratedKeys true, keyProperty "id") Insert("insert into emp(username, name, gender, phone, job, salary, image, entry_date, dept_id, create_time, update_time) " "value…...

nio多线程版本

多线程多路复用 多线程NIO&#xff0c;&#xff0c;就是多个线程&#xff0c;每个线程上都有一个Selector&#xff0c;&#xff0c;&#xff0c;比如说一个系统中一个线程用来接收请求&#xff0c;&#xff0c;剩余的线程用来读写数据&#xff0c;&#xff0c;每个线程独立干自…...

Electron、Tauri及其它跨平台方案终极对比

Electron、Tauri及跨平台方案终极对比&#xff08;2025版&#xff09; 一、核心框架深度解析 1.1 Electron&#xff1a;Web技术的桌面霸主 技术架构 基于Chromium&#xff08;浏览器内核&#xff09; Node.js&#xff08;后端运行时&#xff09;的双进程架构&#xff0c;支持…...

蓝桥杯试题:二分查找

一、问题描述 给定 n 个数形成的一个序列 a&#xff0c;现定义如果一个连续子序列包含序列 a 中所有不同元素&#xff0c;则该连续子序列便为蓝桥序列&#xff0c;现在问你&#xff0c;该蓝桥序列长度最短为多少&#xff1f; 例如 1 2 2 2 3 2 2 1&#xff0c;包含 3 个不同的…...

MongoDB Chunks核心概念与机制

1. 基础定义‌ ‌Chunk&#xff08;块&#xff09;‌&#xff1a;MongoDB分片集群中数据的逻辑存储单元&#xff0c;由一组连续的片键&#xff08;Shard Key&#xff09;范围数据组成&#xff0c;默认大小为‌64MB‌&#xff08;可调整范围为1-1024MB&#xff09;‌。‌数据分…...

决策树(Decision Tree):机器学习中的经典算法

1. 什么是决策树&#xff1f; 决策树&#xff08;Decision Tree&#xff09;是一种基于树形结构的机器学习算法&#xff0c;适用于分类和回归任务。其核心思想是通过一系列的规则判断&#xff0c;将数据集不断划分&#xff0c;最终形成一棵树状结构&#xff0c;从而实现预测目…...

高频 SQL 50 题(基础版)_1084. 销售分析 III

高频 SQL 50 题&#xff08;基础版&#xff09;_1084. 销售分析 III 思路 思路 select t1.product_id,product_name from Product as t1 join(select product_id,min(sale_date) as min_date,max(sale_date) as max_datefrom Salesgroup by (product_id)having 2019-01-01<…...

Python-selenium启动edge打开百度

文章目录 专栏导读1、背景2、代码总结 专栏导读 &#x1f525;&#x1f525;本文已收录于《Python基础篇爬虫》 &#x1f251;&#x1f251;本专栏专门针对于有爬虫基础准备的一套基础教学&#xff0c;轻松掌握Python爬虫&#xff0c;欢迎各位同学订阅&#xff0c;专栏订阅地址…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...