css3之2D转换transform

news2024/11/25 8:20:34

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.coloradmin.cn/o/1557669.html

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

相关文章

VAE——生成数字(Pytorch+mnist)

1、简介 VAE(变分自编码器)同样由编码器和解码器组成,但与AE不同的是,VAE通过引入隐变量并利用概率分布来学习潜在表示。VAE的编码器学习将输入数据映射到潜在空间的概率分布的参数,而不是直接映射到确定性的潜在表示…

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

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

2_1.Linux中的网络配置

#1.什么是IP ADDRESS# internet protocol ADDRESS ##网络进程地址 ipv4 internet protocol version 4 ip是由32个01组成 11111110.11111110.11111110.11111110 254.254.254.254 #2.子网掩码# 用来划分网络区域 子网掩码非0的位对应的ip上的数字表示这个ip的网络位 子网掩码0位…

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

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

JWFD流程图转换为矩阵数据库的过程说明

在最开始设计流程图的时候,请务必先把开始节点和结束节点画到流程图上面,就是设计器面板的最开始两个按钮,先画开始点和结束点,再画中间的流程,然后保存,这样提交到矩阵数据库就不会出任何问题,…

实习管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW,文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文(设计)学生选题参考合集推荐收藏(包含Springboot、jsp、ssmvue等技术项目合集) 1. 前台功能…

zabbix主动发现,注册及分布式监控

主动发现 结果 主动注册 结果 分布式监控 服务机:132 代理机:133 客户端:135 代理机 数据库赋权: 代理机配置 网页上配置代理 客户端配置 网页上配置主机 重启代理机服务 网页效果

开源知识库平台Raneto--使用Docker部署Raneto

文章目录 一、Raneto介绍1.1 Raneto简介1.2 知识库介绍 二、阿里云环境2.1 环境规划2.2 部署介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载Raneto镜像五、部署Raneto知识库平台5.1 创建挂载目录5.2 编辑config.js文件5.…

书生·浦语训练营二期第一次笔记

文章目录 书生浦语大模型全链路开源体系视频笔记Intern2模型体系 训练数据集书生浦语全链条开源开放体系开放高质量语料数据预训练微调中立全面性能榜单大模型评测全栈工具链部署 书生浦语大模型全链路开源体系-Bilibili视频InternLM2技术报告(中文)Inte…

C#基础知识总结

C语言、C和C#的区别 ✔ 面向对象编程(OOP): C 是一种过程化的编程语言,它不直接支持面向对象编程。然而,C 是一种支持 OOP 的 C 的超集,它引入了类、对象、继承、多态等概念。C# 是完全面向对象的&#xff…

酷柚易讯无人空间小程序注册后需开通的部分接口权限

注意:无人共享小程序注册认证与备案后,需要开通以下接口系统才能正常使用! 登录小程序后,找到开发管理->接口设置(申请对应的接口权限)

设计模式10--适配器模式

定义 案例一 案例二 优缺点

用html实现一个手风琴相册设计

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>手风琴相册设计</title><link rel"stylesheet" href"./style.css"> </head> <body> <h1>Accordio…

S7-1500PLC与ABB机器人RobotStudio调试演示

(1)建立空工作站 (2)选择机器人、导入吸盘、托盘、传送带 (3) 将导入的吸盘变为工具 (4)创建机器人系统 布局如下 (5)创建物体 (6)设置物体本地原点 (7)创建传送带Smart组件 (8)创建吸盘Smart组件 将吸盘的传感器拖到吸盘上 (9)示教目标点 (10)同步示教点 (11)添加信号 创建…

汽车租赁(源码+文档)

汽车租赁&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明含有功能项目截图客户端登录界面首页订单个人信息我的界面新手指引注册界面车型选择支付界面修改信息 管理端用户管理订单管理分类管理 文件包含内容 1、搭建视频 2、流程图 3、开题报告 …

Uibot6.0 (RPA财务机器人师资培训第4天 )批量开票机器人案例实战

类似于小北之前发布的一篇博客&#xff08;不能说很像&#xff0c;只能说是一模一样&#xff09; Uibot (RPA设计软件&#xff09;财务会计Web应用自动化(批量开票机器人&#xff09;-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/136782171?spm1001.2014.3001.…

搜索与图论——染色法判定二分图

一个图是二分图当且仅当这个图中不含奇数环 由于图中没有奇数环&#xff0c;所以染色过程中一定没有矛盾 所以一个二分图一定可以成功被二染色&#xff0c;反之在二染色的过程中出现矛盾的图中一定有奇数环&#xff0c;也就一定不是二分图 #include<iostream> #includ…

Unity LineRenderer的基本了解

在Unity中&#xff0c;LineRenderer组件用于在场景中绘制简单的线条。它通常用于绘制轨迹、路径、激光等效果。 下面来了解下它的基本信息。 1、创建 法1&#xff1a;通过代码创建 using UnityEngine;public class CreateLineRenderer : MonoBehaviour {void Start(){// 创…

C# wpf 嵌入winform控件

WPF Hwnd窗口互操作系列 第一章 嵌入Hwnd窗口 第二章 嵌入WinForm控件&#xff08;本章&#xff09; 第三章 嵌入WPF控件 第四章 底部嵌入HwndHost 文章目录 WPF Hwnd窗口互操作系列前言一、导入WinForm1、.Net Framwork&#xff08;1&#xff09;、右键添加引用&#xff08;2…

Linux:对TCP阻塞控制/面向字节流/异常的理解

文章目录 阻塞控制面向字节流TCP链接异常 本篇总结TCP的最后一点小知识 阻塞控制 首先对于阻塞控制的概念是&#xff0c;它是和网络环境息息相关的 如果在发送数据的时候出现问题&#xff0c;不仅仅是由于对方链接出错&#xff0c;其实还和当前的网络情况有关&#xff0c;假…