CSS(13):2D

devtools/2024/12/22 2:42:56/

一.2D转换之移动translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。

transform:translate(x,y);(里面可以用到参数%,是相对于自身宽度和高度来计算的)

transform:translateX(n);

transform:translateY(n);

二.2D转换之旋转rotate:可以实现旋转元素

transform:rotate(度数)

rotate里面跟度数,单位是d,eg比如rotate(45deg)

角度为正时,顺时针,负时,为逆时针

默认旋转的中心点为元素的中心点

三.transform:scale()放大缩小:里面的参数是数字不跟单位,可以是小数,最大的优势是不影响其他盒子

表示宽高同时1.2倍

四.设置转换中心点transform-origin:x y;参数可以百分比,像素或者方位名词

五.2D转换综合写法

同时使用多个转换:

transform:translate() rotate() scale()...等

其顺序会影响转换效果。(先旋转会改变坐标轴方向)

当我们同时有位移和其他属性的时候,记得要将位移放在最前面。


http://www.ppmy.cn/devtools/144254.html

相关文章

springboot441本庄村果园预售系统的设计与实现(论文+源码)_kaic

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统本庄村果园预售系统信息管理难度大,容错率低…

三次翻转实现数组元素的旋转

给定一个数组,将数组中的元素向右移动 k 个位置。 示例 1: 输入: [1,2,3,4,5,6,7] 和 k 3 输出: [5,6,7,1,2,3,4] 解释: 向右旋转 1 步: [7,1,2,3,4,5,6] 向右旋转 2 步: [6,7,1,2,3,4,5] 向右旋转 3 步: [5,6,7,1,2,3,4]示例 2: 输入: [-1,-100,3,99] 和 k 2 …

嵌入式软件设计中的中断和查询

在嵌入式软件设计中,中断和查询是两种常见的事件处理机制。它们各自具有不同的特点和应用场景,对于理解这两种机制以及如何在实践中应用它们,以下进行了详细阐述: 中断 定义:中断是一种硬件机制,用于通知处…

自定义 Spring Boot Starter 流程

springboot&#xff0c;vue&#xff0c;springcloudalibaba课程视频&#xff0c;有需要可以看看 <!-- springboot&#xff0c;springboot整合redis&#xff0c;整合rocketmq视频&#xff1a; --> https://www.bilibili.com/video/BV1nkmRYSErk/?vd_source14d27ec13a473…

安全删除硬件并弹出媒体(弹出显卡)问题处理

“安全删除硬件”图标点开之后&#xff0c;出现弹出显卡问题 解决办法&#xff1a; 本人是华硕笔记本电脑&#xff0c;这仅仅是我的解决办法&#xff0c;仅供参考&#xff01; 更新/安装“触控板驱动程序” 以下以华硕为例&#xff1a; 去电脑官网下&#xff0c;下载“触控…

如何在Java中使用封装好的API接口?

1.选择合适的 HTTP 库 在 Java 中&#xff0c;可以使用多种库来进行 HTTP 请求。java.net.HttpURLConnection是 Java 标准库中的类&#xff0c;能够满足基本的 HTTP 请求需求&#xff0c;但使用起来相对复杂。另外&#xff0c;还有一些第三方库&#xff0c;如OkHttp和Apache H…

HarmonyNext使用ListItemGroup添加头部 布局,头部布局底部留很大空白

今天使用ListItemGroup添加头部布局的时候&#xff0c;发现底部留下很多空白 头部布局使用的是相对布局RelativeContainer 错误代码如下&#xff1a; import { CommonConstants } from "ohos/utils/src/main/ets/common/CommonConstants"; import { DisPlayInfo } …

Laya ios接入goole广告,搭建环境 1

只能说麻烦的一批&#xff0c;会了不难&#xff0c;难在不会 没有mac机&#xff0c;用的mac本&#xff0c;提示----》可能需要你升级macbook系统版本&#xff0c; 1、安装cocoapods sudo gem install cocoapods -V 加上-V&#xff0c;能查看安装进度&#xff0c;记住大写的…