第十讲_css2d转换

news/2024/2/25 21:00:45/文章来源:https://blog.csdn.net/wenqi1992/article/details/135573297

css2d转换

  • 1. 移动
  • 2. 旋转
  • 3. 缩放
  • 4. 组合转换
  • 5. 设置原点

1. 移动

translate() :参照元素原位置,在X轴和Y轴方向上移动。

<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* 在X轴方向移动50px */transform: translateX(50px);}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* 在Y轴方向移动50px */transform: translateY(50px);}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 在Y轴方向移动50px */transform: translate(50px, 50px);}.container3 {width: 200px;height: 200px;background-color: blue;}</style><div class="container1"></div><div class="container2"></div><div class="container3"></div>
</html>

在设置移动量时,除了用像素外,还可以使用百分比。X轴上的百分比是相对于了自身元素的宽,Y轴上的百分比是相对于自身元素的高。

2. 旋转

rotateZ():根据指定角度旋转元素。2D旋转就是绕着Z轴旋转。

<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* 旋转20deg */transform: rotateZ(20deg)}.container1 {width: 200px;height: 200px;background-color: red;}</style><div class="container1"></div>
</html>

3. 缩放

scale() :根据指定的倍数在X轴和Y轴缩放元素。

<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* X轴上缩小为原来的0.5倍 */transform: scaleX(0.5)}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* Y轴上缩小为原来的0.5倍 */transform: scaleY(0.5)}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 在X轴和Y轴上放大为原来的1.5倍 */transform: scale(1.5, 1.5)}.container3 {width: 200px;height: 200px;background-color: blue;}</style><div class="container1"></div><div class="container2"></div><div class="container3"></div>
</html>

4. 组合转换

<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* 先移动,再旋转*//* 注意:旋转后坐标系也会旋转  */transform: translate(50px, 50px) rotateZ(30deg);}.container1 {width: 200px;height: 200px;background-color: red;}</style><div class="container1"></div>
</html>

5. 设置原点

上述的变化都是基于默认的原点,默认的原点是元素的中心点。
transform-origin 设置原点在X轴的位置和Y轴的位置。

<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的左上角,元素绕着左上角旋转 */transform-origin: left top;}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的左下角 */transform-origin: 0 200px;}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的中心点,也是默认值 */transform-origin: 50% 50%;}.container3 {width: 200px;height: 200px;background-color: blue;}</style><div class="container1"></div><div class="container2"></div><div class="container3"></div>
</html>

ps:上述所有代码执行后,需要鼠标悬停在元素上查看转换的效果。

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

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

相关文章

如何在Windows 10/11的防火墙中禁止和允许某个应用程序,这里提供详细步骤

想阻止应用程序访问互联网吗&#xff1f;以下是如何通过简单的步骤阻止和允许Windows防火墙中的程序。​ 一般来说&#xff0c;大多数用户永远不需要担心应用程序访问互联网。然而&#xff0c;在某些情况下&#xff0c;你需要限制应用程序访问互联网。 例如&#xff0c;有问题…

vue知识-03

购物车案例 要实现的功能&#xff1a; 1、计算商品总价格 2、全选框和取消全选框 3、商品数量的增加和减少 <body> <div id"app"><div class"row"><div class"col-md-6 col-md-offset-3"><h1 class"text-center…

TinyLog iOS v3.0接入文档

1.背景 为在线教育部提供高效、安全、易用的日志组件。 2.功能介绍 2.1 日志格式化 目前输出的日志格式如下&#xff1a; 日志级别/[YYYY-MM-DD HH:MM:SS MS] TinyLog-Tag: |线程| 代码文件名:行数|函数名|日志输出内容触发flush到文件的时机&#xff1a; 每15分钟定时触发…

【Spring 篇】走进SpringMVC的世界:舞动Web的激情

嗨&#xff0c;亲爱的小白们&#xff01;欢迎来到这篇关于SpringMVC的博客&#xff0c;让我们一起探索这个舞动Web的框架&#xff0c;感受它带来的激情和便利。在这个世界里&#xff0c;我们将学到SpringMVC的概述、开发步骤以及如何快速入门&#xff0c;一切都是如此的令人兴奋…

C# Winform翻牌子记忆小游戏

效果 源码 新建一个winform项目命名为Matching Game&#xff0c;选用.net core 6框架 并把Form1.cs代码修改为 using Timer System.Windows.Forms.Timer;namespace Matching_Game {public partial class Form1 : Form{private const int row 4;private const int col 4;p…

为什么光刻要用黄光

光刻是集成电路&#xff08;IC或芯片&#xff09;制造中的重要工艺之一。简单来说&#xff0c;它是通过使用光掩膜和光刻胶在基板上复制电路图案的过程。 基板将涂覆硅二氧化层绝缘层和光刻胶。光刻胶在被紫外光照射后可以容易地用显影剂溶解&#xff0c;然后在腐蚀后&#xf…

MongoDB Compass当前版本及历史版本下载安装

mongoDB compass 当前版本下载 官网 https://www.mongodb.com/try/download/compass 官网下载一般只能下载最新版本。 github https://github.com/mongodb-js/compass MongoDB Compass与MongoDB的版本对应关系 MongoDB CompassMongoDB1.9.12MongoDB 2.6.11 Community

Redis:原理速成+项目实战——Redis企业级项目实战终结篇(HyperLogLog实现UV统计)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…

uniapp-uniCloud的基本使用(编写云存储的地区级联选择器)

目录 新建项目&#xff0c;创建 uniCloud 服务空间并关联 1. 新建项目 2. 创建 uniCloud 服务空间并关联 manifest.json内未配置Appld,请重新获取后再 云数据库的使用 城市选择和云数据库 介绍 云端数据 DB Schema概述 新建项目&#xff0c;创建 uniCloud 服务空间并关…

统计学-R语言-4.3

文章目录 前言直方图茎叶图箱线图练习 前言 本篇介绍的是数值型数据怎么进行数据可视化&#xff0c;本篇介绍的有直方图、茎叶图、箱线图。 直方图 直方图&#xff08;Histogram&#xff09;用于描述连续型变量的频数分布&#xff0c;实际应用中常用于考察变量的分布是否对称…

Java零基础——Vue基础篇

1.【熟悉】Vue简介 1.1 简介 它是一个构建用户界面单页面的框架 Vue是一个前端框架 https://www.pmdaniu.com/#file UI网站 UI 一般开发者使用蓝湖 工具 看着UI图 写接口 https://lanhuapp.com/web/#/item 是一个轻量级的MVVM&#xff08;Model-View-ViewModel&#xff…

maven管理使用

maven基本使用 一、简介二、配置文件三、项目结构maven基本标签实践(例子) 四、pom插件配置五、热部署六、maven 外部手动加载jar打包方式Maven上传私服或者本地 一、简介 基于Ant 的构建工具,Ant 有的功能Maven 都有,额外添加了其他功能.本地仓库:计算机中一个文件夹,自己定义…

Linux实操学习

Linux常用操作 一、帮助命令1. man1.1 基本语法1.2 快捷键1.3 注意事项 2. help2.1 基本语法2.2 注意事项 3. 常用快捷键 二、文件目录类1. 常规操作1.1 pwd1.2 cd1.3 ls 2. 文件夹操作2.1 mkdir2.2 rmdir 3. 文件操作3.1 touch3.2 cp3.3 rm3.4 mv 4. 文件查看4.1 cat4.2 more4…

国内外好用的 LLM 列表

视频来源&#xff1a;https://www.bilibili.com/video/BV1c64y157Qm/?vd_source1e841703c91b5b77fd20e5707bae49d2 下图是测试括号闭合能力的得分

windows系统下docker软件中使用ubuntu发行版本的linux系统

1.软件下载 官网下载地址 下载安装之后&#xff0c;再去微软商店下载wsl软件&#xff0c;可以直接用&#xff0c;或者也可以使用命令行拉取&#xff08;下面会讲&#xff09; 2.在docker里面创建容器的两种方法 2.1.命令行创建 前言&#xff1a;输入 winr 打开命令行进行下面…

软件测试|使用Python抓取百度新闻的页面内容

简介 作为技术工程师&#xff0c;在繁忙的工作中我们不一定有时间浏览发生的热点新闻&#xff0c;但是懂技术的我们不需要访问网站来看当下发生的大事&#xff0c;我们可以使用网络爬虫的技术来获取当下最新最热的新闻&#xff0c;本文就来介绍一下使用Python抓取一下百度新闻…

鸿蒙APP和Android的区别

鸿蒙&#xff08;HarmonyOS&#xff09;和Android是两个不同的操作系统&#xff0c;它们有一些区别&#xff0c;包括架构、开发者支持、应用生态和一些设计理念。以下是鸿蒙APP和Android APP之间的一些主要区别&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#…

码牛课堂首推——鸿蒙南北双向开发学习路线图标准版~

鸿蒙&#xff01;鸿蒙&#xff01;鸿蒙&#xff01; 要说2023-2024年IT圈最火爆的名词&#xff0c;一定是鸿蒙&#xff01; 2023年9月25日&#xff0c;华为发布会正式宣布2024年第一季度将推出HarmonyOS NEXT版本&#xff0c;这意味着鸿蒙原生应用开发将彻底摆脱Android手机系…

了解Python中的requests.Session对象及其用途

前言 在Python的网络编程中&#xff0c;requests库是一个非常流行的HTTP客户端库&#xff0c;用于发送各种类型的HTTP请求。在requests库中&#xff0c;requests.Session对象提供了一种在多个请求之间保持状态的方法本文将探讨Python中的requests.Session对象及其用途&#xf…

大数据Doris(五十六):SQL函数之地理位置函数

文章目录 SQL函数之地理位置函数 一、​​​​​​​ST_AsText(GEOMETRY geo)