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

css3之2D转换transform

news 2026/5/12 12:18:10

2D转换transform

  • 一.移动（translate)(中间用，隔开）
  • 二.旋转（rotate)（有单位deg)
    • 1.概念
    • 2.注意点
    • 3.转换中心点（transform-origin)（中间用空格）
    • 4.一些例子(css三角和旋转）
  • 三.缩放（scale）（无单位）（中间用，隔开）
    • 1.概念
    • 2.优点（按高和宽做不到）
    • 3.一些例子（图片放大和分页按钮案例）
  • 四.简写（位移放前）
  • 五.总结

一.移动（translate)(中间用，隔开）

在这里插入图片描述

二.旋转（rotate)（有单位deg)

1.概念

在这里插入图片描述

2.注意点

1，单位deg
2,+顺，-逆
3，默认旋转中心是中心点

3.转换中心点（transform-origin)（中间用空格）

在这里插入图片描述

4.一些例子(css三角和旋转）

（1）css三角即^（只需设置右边框和下边框）
在这里插入图片描述
(2)旋转效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三.缩放（scale）（无单位）（中间用，隔开）

1.概念

在这里插入图片描述

2.优点（按高和宽做不到）

（1）按旋转中心缩放且旋转中心可改变
（2）不会影响其他盒子

3.一些例子（图片放大和分页按钮案例）

（1）图片放大（鼠标经过时）（溢出用overflow，谁做过渡给谁用transition）
在这里插入图片描述
在这里插入图片描述

（2）分页按钮
在这里插入图片描述
在这里插入图片描述

四.简写（位移放前）

在这里插入图片描述

五.总结

在这里插入图片描述

相关文章：

css3之2D转换transform

2D转换transform 一.移动（translate)(中间用，隔开）二.旋转（rotate)（有单位deg)1.概念2.注意点3.转换中心点（transform-origin)（中间用空格）4.一些例子(css三角和旋转） 三…...

编程日记 2024/3/31 6:46:28

pytest中文使用文档----6临时目录和文件

1. 相关的fixture 1.1. tmp_path1.2. tmp_path_factory1.3. tmpdir1.4. tmpdir_factory1.5. 区别 2. 默认的基本临时目录 1. 相关的fixture 1.1. tmp_path tmp_path是一个用例级别的fixture，其作用是返回一个唯一的临时目录对象（pathlib.Path&#xf…...

编程日记 2024/3/31 6:43:25

从0开始搭建基于VUE的前端项目

准备与版本 安装nodejs(v20.11.1)安装vue脚手架(vue/cli 5.0.8) ,参考（https://cli.vuejs.org/zh/）vue版本（2.7.16），vue2的最后一个版本 初始化项目 创建一个git项目（可以去gitee/github上创建&#xff…...

编程日记 2024/3/31 6:42:24

elementUI this.$msgbox msgBox自定义 样式自定义 富文本

看这个效果是不是很炫？突出重点提示内容，对于用户交互相当的棒！ 下来说说具体实现： let self = this const h = self.$createElement; this.$msgbox({title: null,message: h("p", {style: "margin-top:10px"}, [h("i", {class: "el-i…...

编程日记 2024/3/31 6:41:23

Lua与Python区别

Lua和Python都是流行的编程语言，但它们在设计哲学、应用领域和性能特点上有所不同。以下是Lua和Python之间的对比： 1. **设计哲学**: - Lua被设计为一个轻量级的嵌入式脚本语言，重点在于简单性和效率。它有一个小巧的标准库，通…...

编程日记 2024/3/31 6:40:22

Python学习（二）

数据容器 数据容器根据特点的不同，如： 是否支持重复元素是否可以修改是否有序，等 分为5类，分别是： 列表（list）、元组（tuple）、字符串（str）、集…...

编程日记 2024/3/31 6:37:19

管理阿里云服务器ECS -- 网站选型和搭建

小云：我已经学会了如何登录云服务器ECS了，但是要如何搭建网站呢？ 老王：目前有很多的个人网站系统软件，其中 WordPress 是使用非常广泛的一款，而且也可以把 WordPress 当作一个内容管理系统（CMS…...

编程日记 2024/3/31 6:36:18

WPF中继承ItemsControl子类控件数据模板获取选中属性

需求场景 列表类控件&#xff0c;如 ListBox、ListView、DataGrid等。显示的行数据中&#xff0c;部分内容依靠选中时触发控制&#xff0c;例如选中行时行记录复选&#xff0c;部分列内容控制显隐。 案例源码以ListView 为例。 Xaml 部分 <ListView ItemsSource"{Bi…...

编程日记 2024/3/31 6:35:17

Android卡顿掉帧问题分析之实战篇

本文将结合典型实战案例&#xff0c;分析常见的造成卡顿等性能问题的原因。从系统工程师的总体角度来看 &#xff0c;造成卡顿等性能问题的原因总体上大致分为三个大类&#xff1a;一类是流程执行异常&#xff1b;二是系统负载异常&#xff1b;三是编译问题引起。 1 流程执行异…...

编程日记 2024/3/31 6:34:15

OpenKylin安装Kafka

一、操作系统 openKylin 1.0.1 X86 二、下载安装包 # 安装依赖jdk sudo apt-get update sudo apt-get install default-jdk # 下载kafka mkdir -p /data/software/kafka wget https://archive.apache.org/dist/kafka/2.4.1/kafka_2.13-2.4.1.tgz三、解压安装 # 解压缩Kafka…...

编程日记 2024/3/31 6:31:12

嵌入式硬件中常见的面试问题与实现

1 01 请列举您知道的电阻、电容、电感品牌（最好包括国内、国外品牌） ▶电阻 美国：AVX、VISHAY威世 日本：KOA兴亚、Kyocera京瓷、muRata村田、Panasonic松下、ROHM罗姆、susumu、TDK 台湾：LIZ丽智、PHYCOM飞元、RALEC旺诠、ROYALOHM厚生、SUPEROHM美隆、TA-I大毅、TMT…...

编程日记 2024/3/31 6:28:10

【Node.JS】koa

文章目录 概述koa和express对比koa下载安装使用1.创建koa项目文件目录2. 创建koa服务3. 添加路由 koa-router4. 数据库服务 mongodb5. 添加请求参数json处理 koa-bodyparser6. 用户接口举例7.引入koa一些常用插件8.用户登录验证 koa-jwt9.webpack生产打包 来源 概述 Koa 是一个…...

编程日记 2024/3/31 6:27:09

工作日志- 不定期更新

1. protobuf中使用import引用其他proto文件&#xff0c;生成后在go语言的go modules中import 包名报错问题。 public.proto文件 //protoc --go_outpluginsgrpc:. public.proto syntax "proto3";package public;option go_package "self/game-service/msg/pu…...

编程日记 2024/3/31 6:25:06

Qt使用opencv打开摄像头

1.效果图 2.代码 #include "widget.h"#include <QApplication>#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp>#include <QImage> #include <QLabel> #incl…...

编程日记 2024/3/31 6:24:05

Redis的Hash数据结构中100万对field和value，field是自增时如何优化？优化Hash结构。

ZipList使用是有条件的&#xff0c;当entry数据量太大时就会启用哈希结构&#xff0c;占用内存空间 1.设置bigkey的上限 在redis.config中设置 2.拆分为string类型 String底层结果没有太多优化&#xff0c;占用内存多 想要批量获取数据麻烦 3.拆分为小的hash 将id/100作为…...

编程日记 2024/3/31 6:22:03

二十四种设计模式与六大设计原则（一）：【策略模式、代理模式、单例模式、多例模式、工厂方法模式、抽象工厂模式】的定义、举例说明、核心思想、适用场景和优缺点

目录 策略模式【Strategy Pattern】 定义 举例说明 核心思想 适用场景 优缺点 代理模式【Proxy Pattern】 定义 举例说明 核心思想 适用场景 优缺点 单例模式【Singleton Pattern】 定义 举例说明 核心思想 适用场景 优缺点 多例模式【Multition Pattern】…...

编程日记 2024/3/31 6:20:02

mac怎么删除python

mac 默认安装了python2&#xff1b;自己后面又安装了python3&#xff1b;为了方便&#xff0c;现在想将python3换成Anaconda3。 Anaconda是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。 Python3安装之后&#xff0c;在系统中不同目…...

编程日记 2024/3/31 6:18:00

【笔记】Android U RILJ 中与运营商名称SPN显示相关的日志分析

源码阅读&#xff1a;AOSPXRef 常用日志关键字 Note&#xff1a;">"下发MD&#xff0c;"<"MD上报&#xff0c;[]中的id有请求和返回的对应关系 KEYComment> OPERATOR下发MD&#xff0c;请求运营商信息< OPERATORMD上报运营商注册信息> DA…...

编程日记 2024/3/31 6:16:59

蓝桥杯【奇怪的捐赠】c语言

我会将这题的解题的核心思路解为将10进制转化成7进制&#xff0c;毕竟题目上说的很清楚7的几次方 然后附上我认为的最优解 #include<stdio.h> int main() {int n 1000000;int sum 0;while (n ! 0){int a;a n % 7;n n / 7;sum a ;}printf("%d", sum);retu…...

编程日记 2024/3/31 6:15:58

【3月比赛合集】5场可报名的「创新应用」、「数据分析」和「程序设计」大奖赛，任君挑选！

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 创新应用赛&#xff08;2场比赛&#xff09;数据分析赛&#…...

编程日记 2024/3/31 6:14:57

【20年架构老兵亲授】：SITS 2026服务边界定义三原则、8类AI上下文耦合陷阱及动态治理沙盒实测数据

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生微服务架构&#xff1a;SITS 2026服务拆分与治理策略 AI原生微服务并非传统微服务的简单升级&#xff0c;而是以模型生命周期、推理上下文感知和实时反馈闭环为驱动的服务边界重构。SITS 2026&am…...

编程新知 2026/5/12 9:59:09

怎样高效管理微信社交网络：5个微信工具箱实用技巧完整指南

怎样高效管理微信社交网络&#xff1a;5个微信工具箱实用技巧完整指南 【免费下载链接】wechat-toolbox WeChat toolbox&#xff08;微信工具箱&#xff09; 项目地址: https://gitcode.com/gh_mirrors/we/wechat-toolbox 微信工具箱&#xff08;wechat-toolbox&#xf…...

编程新知 2026/5/12 9:08:44

微信小程序二维码生成神器：5分钟搞定前端二维码生成

微信小程序二维码生成神器&#xff1a;5分钟搞定前端二维码生成 【免费下载链接】weapp-qrcode weapp.qrcode.js 在 微信小程序 中&#xff0c;快速生成二维码 项目地址: https://gitcode.com/gh_mirrors/we/weapp-qrcode 还在为微信小程序中的二维码功能而烦恼吗&#…...

编程新知 2026/5/12 8:54:17

全球化技术团队协作：跨越文化差异的沟通与管理实践

1. 从“理所当然”到“文化自觉”&#xff1a;全球化职场的思维转型在电子设计自动化&#xff08;EDA&#xff09;和半导体行业摸爬滚打了十几年&#xff0c;我参与过跨国项目&#xff0c;也带过分布在全球各地的团队。一个深刻的体会是&#xff0c;我们这些搞技术的&#xff0…...

编程新知 2026/5/12 7:52:59

轻量级容器化部署工具Ship：简化中小团队应用部署流程

1. 项目概述&#xff1a;一个面向开发者的轻量级容器化部署工具最近在和朋友聊起中小团队或个人开发者的部署痛点时&#xff0c;大家普遍觉得&#xff0c;虽然Kubernetes&#xff08;K8s&#xff09;生态强大&#xff0c;但对于一个快速迭代的独立项目或小团队来说&#xff0c;…...

编程新知 2026/5/12 5:48:14

Radon实战指南：在CI/CD中集成Python代码质量检查的完整教程

Radon实战指南&#xff1a;在CI/CD中集成Python代码质量检查的完整教程 【免费下载链接】radon Various code metrics for Python code 项目地址: https://gitcode.com/gh_mirrors/rad/radon Radon是一个强大的Python代码质量分析工具&#xff0c;能够帮助开发者自动检测…...

编程新知 2026/5/12 4:55:41

19 - 语言模型为何是AGI的开端？——从“知识压缩”到“智能涌现”的第一性原理

本专题系列文章共 21 篇，前 5 篇限时免费阅读 01 - 眩晕时代的定海神针：大模型落地的“第一性原理”与算力丰裕悖论 02 - 95%的AI投资打了水漂：五大错配如何扼杀你的“第二增长曲线” 03 - 从电力到AI：标准化已死，个性化永生——大模型时代的三大商业终局 04 - 你的护城…...

编程新知 2026/5/12 4:22:56

Sora 2生成素材在AE中频繁掉帧？20年合成老炮儿用CUDA Graph重构图层管线，性能提升3.8倍（含Profile对比图）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Sora 2生成素材在AE中频繁掉帧&#xff1f;20年合成老炮儿用CUDA Graph重构图层管线&#xff0c;性能提升3.8倍&#xff08;含Profile对比图&#xff09; 当Sora 2输出的4K/60fps高动态范围视频序列导入…...

编程新知 2026/5/12 3:54:08

线束工程化实践：从设计到测试的自动化工具链与开源资源

1. 项目概述&#xff1a;从“Awesome”清单到工程化实践在开源世界里&#xff0c;“Awesome”系列清单就像一个个精心整理的藏宝图&#xff0c;指引着开发者们快速找到某个领域内的优质资源。今天要聊的这个项目fastbeast2023-netizen/awesome-harness-engineering&#xff0c;…...

编程新知 2026/5/12 3:52:07

Mac上如何用DistroAV插件实现无线多机位直播：NDI技术完整指南

Mac上如何用DistroAV插件实现无线多机位直播&#xff1a;NDI技术完整指南 【免费下载链接】obs-ndi DistroAV (formerly OBS-NDI): NDI integration for OBS Studio 项目地址: https://gitcode.com/gh_mirrors/ob/obs-ndi 还在为Mac上的OBS直播设置烦恼吗&#xff1f;想…...

编程新知 2026/5/12 2:59:23