css3之2D转换transform

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)分页按钮
在这里插入图片描述
在这里插入图片描述

四.简写(位移放前)

在这里插入图片描述

五.总结

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测

分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测 目录 分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记…

love 2d Lua 俄罗斯方块超详细教程

源码已经更新在CSDN的码库里: git clone https://gitcode.com/funsion/love2d-game.git 一直在找Lua 能快速便捷实现图形界面的软件,找了一堆,终于发现love2d是小而美的原生lua图形界面实现的方式。 并参考相关教程做了一个更详细的&#x…

聊聊多版本并发控制(MVCC)

多版本并发控制(MVCC) MVCC一直是数据库部分的高频面试题,这篇文章来聊聊MVCC是什么,以及一些底层原理的实现。 当前读和快照读: 当前读:读取的是事务最新的版本,读取的过程中其他并发事务不…

TC16-161T+ 音频 信号变压器 RF Transformers 600kHz-160MHz 射频集成电路 Mini-Circuits

Mini-Circuits是一家全球领先的射频、微波和毫米波元器件及子系统制造商。TC16-161T是Mini-Circuits出产的一款射频IC(射频集成电路),具有平衡-不平衡转换器功用。制造商: Mini-Circuits 产品品种: 音频变压器/信号变压器 RoHS…

FA模型切换Stage模型之module的切换

从FA模型切换到Stage模型时,开发者需要将config.json文件module标签下的配置迁移到module.json5配置文件module标签下,具体差异见下列表格。 表1 FA模型module标签与Stage模型module标签差异对比 表2 FA模型metaData和Stage中metadata对比 表3 FA模型me…

计算机视觉的应用27-关于VoVNetV2模型的应用场景,VoVNetV2模型结构介绍

大家好,我是微学AI,今天给大家介绍一下计算机视觉的应用27-关于VoVNetV2模型的应用场景,VoVNetV2模型结构介绍。VoVNetV2(Visual Object-Driven Representation Learning Network Version 2)是一种深度学习模型&#x…

二十四种设计模式与六大设计原则(二):【门面模式、适配器模式、模板方法模式、建造者模式、桥梁模式、命令模式】的定义、举例说明、核心思想、适用场景和优缺点

接上次博客:二十四种设计模式与六大设计原则(一):【策略模式、代理模式、单例模式、多例模式、工厂方法模式、抽象工厂模式】的定义、举例说明、核心思想、适用场景和优缺点-CSDN博客 目录 门面模式【Facade Pattern】 定义 举…

大数据面试专题 -- kafka

1、什么是消息队列? 是一个用于存放数据的组件,用于系统之间或者是模块之间的消息传递。 2、消息队列的应用场景? 主要是用于模块之间的解耦合、异步处理、日志处理、流量削峰 3、什么是kafka? kafka是一种基于订阅发布模式的…

Gitea 的详细介绍

什么是 Gitea? Gitea 是一个开源、轻量级的自托管 Git 服务,它允许用户搭建类似于 GitHub 或 GitLab 的代码托管平台。由于采用 Go 语言开发,Gitea 具有高效的性能和跨平台特性,适合个人开发者或小团队使用。 Gitea 的特点 轻量…

跨越时空,启迪智慧:奇趣相机重塑儿童摄影与教育体验

【科技观察】近期,奇趣未来公司以其创新之作——“奇趣相机”微信小程序,强势进军儿童AI摄影市场。这款专为亚洲儿童量身定制的应用,凭借精准贴合亚洲儿童面部特征的AIGC大模型,以及丰富的摄影模板与场景设定,正在重新…

Python下载bing每日壁纸并实现win11 壁纸自动切换

前言: 爬虫哪家强,当然是python 我是属于啥语言都用,都懂点,不精通,实际工作中能能够顶上就可以。去年写的抓取bing每日的壁纸,保存到本地,并上传到阿里云oss,如果只是本地壁纸切换,存下来就行,一直想做个壁纸站点&…

【AcWing】蓝桥杯集训每日一题Day9|区间合并|1343.挤牛奶(C++)

1343.挤牛奶 1343. 挤牛奶 - AcWing题库难度:简单时/空限制:1s / 64MB总通过数:4627总尝试数:13242来源:usaco training 1.3算法标签区间合并差分 题目内容 每天早上 5 点,三名农夫去牛场给奶牛们挤奶。 …

springboot程序文件上传集成腾讯云cos

前提:有腾讯云服务器并开通cos对象存储 创建cos存储桶(访问权限需要设置为共有读私有写,这样到时上传的文件才可以通过链接访问) 创建cos对象存储访问密钥拿到secretId和secretKey 注意创建的密钥一定要保存好后期是无法再次次…

Node.js中Router的使用

文章目录 介绍router的优点1.导入Express和创建Router:2. 定义路由:3.将router暴露到模块外:4. 将Router挂载到Express应用中:4.1.引入router4.2.使用中间件让router在Express应用中生效(三种写法) 5. 完整示例:5.1.编…

Unity 学习日记 13.地形系统

下载源码 UnityPackage 1.地形对象Terrain 目录 1.地形对象Terrain 2.设置地形纹理 3.拔高地形地貌 4. 绘制树和草 5.为地形加入水 6.加入角色并跑步 7.加入水声 右键创建3D地形: 依次对应下面的按钮 || 2.设置地形纹理 下载资源包 下载资源包后&#x…

使用Flink实现MySQL到Kafka的数据流转换

使用Flink实现MySQL到Kafka的数据流转换 本篇博客将介绍如何使用Flink将数据从MySQL数据库实时传输到Kafka,这是一个常见的用例,适用于需要实时数据connector的场景。 环境准备 在开始之前,确保你的环境中已经安装了以下软件:…

Linux课程____shell脚本应用

:一、认识shell 常用解释器 Bash , ksh , csh 登陆后默认使用shell,一般为/bin/bash,不同的指令,运行的环境也不同 二、 编写简单脚本并使用 # vim /frist.sh //编写脚本文件,简单内容 #!/bin/bash …

Astro 宣布:将超过 500 多个测试从 Mocha 迁移到了 Node.js

近期,Astro 在其官方博客中宣布,虽然我们对 Mocha 感到满意,但也在寻求让我们的 CI 作业更快的方法。最终将超过 500 多个测试从 Mocha 迁移到了 Node.js。 先了解下 Astro 是什么?Astro 是适合构建像博客、营销网站、电子商务网站…

简单了解策略模式

什么是策略模式? 策略模式提供生成某一种产品的不同方式 Strategy策略类定义了某个各种算法的公共方法,不同的算法类通过继承Strategy策略类,实现自己的算法 Context的作用是减少客户端和Strategy策略类之间的耦合,客户端只需要…

基于单片机温湿度PM2.5报警设置系统

**单片机设计介绍,基于单片机温湿度PM2.5报警设置系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机温湿度PM2.5报警设置系统概要主要涵盖了系统的整体设计思路、硬件组成、软件实现以及报警功能等关键方…