css3 2d转换transform详细解析与代码实例transform

CSS3 Transform是CSS3的一个模块,其目的是为了通过对元素的变形、旋转、缩放、平移等操作,能够更加丰富的展示页面效果。下面是CSS3 Transform的详细解析与代码实例:

transform属性

transform属性用于对元素进行变形操作,其属性值可以是一种或多种变形函数。常用的变形函数有:translate、rotate、scale、skew等。

以下是transform属性的语法格式:

transform: none|transform-functions;

transform属性既可以单独写也可以与其他属性一起写,如下所示:

div {transform: rotate(30deg) scale(0.5);-webkit-transform: rotate(30deg) scale(0.5); /* Safari 和 Chrome */-moz-transform: rotate(30deg) scale(0.5);    /* Firefox */-ms-transform: rotate(30deg) scale(0.5);     /* IE 9 */-o-transform: rotate(30deg) scale(0.5);      /* Opera */
}

变形函数

translate函数

translate函数用于对元素进行平移操作,其参数可以是一个或两个,分别表示水平和垂直方向的平移距离,语法格式如下:

transform:translate(tx,ty);

其中,tx表示水平方向的平移距离,ty表示垂直方向的平移距离,单位可以是px、em、rem等。

代码实例:

div {transform: translate(50px, 100px);
}

rotate函数

rotate函数用于对元素进行旋转操作,其参数表示旋转角度,语法格式如下:

transform:rotate(angle);

其中,angle表示旋转角度,可以是正数(顺时针方向)或负数(逆时针方向),单位为deg(度数)。

代码实例:

div {transform: rotate(30deg);
}

scale函数

scale函数用于对元素进行缩放操作,其参数表示缩放比例,语法格式如下:

transform:scale(sx,sy);

其中,sx表示水平方向的缩放比例,sy表示垂直方向的缩放比例,参数可以是小数、整数或百分数。

代码实例:

div {transform: scale(0.5);
}

skew函数

skew函数用于对元素进行倾斜操作,其参数表示倾斜角度,语法格式如下:

transform: skew(ax,ay);

其中,ax表示水平方向的倾斜角度,ay表示垂直方向的倾斜角度,可以是正数或负数,单位为deg(度数)。

代码实例:

div {transform: skew(20deg, 10deg);
}

matrix函数

matrix函数用于对元素进行任意变形操作,其参数为一个矩阵,语法格式如下:

transform: matrix(a,b,c,d,e,f);

其中,a、b、c、d、e、f分别表示矩阵的六个值,用于对元素进行变形,具体计算方式与数学中的矩阵变换相同。

代码实例:

div {transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}

transform-origin属性

transform-origin属性用于设置元素变形的基点位置,默认值为元素的中心点,可以设置为左上角、右上角、左下角、右下角等位置。

以下是transform-origin属性的语法格式:

transform-origin: x-axis y-axis z-axis;

其中,x-axis表示水平方向的基点位置,可以是left、center、right、%等值,y-axis表示垂直方向的基点位置,z-axis表示基点位置在z轴(3D场景)上的位置,默认值为0。

代码实例:

div {transform-origin: left top;
}

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

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

相关文章

[100天算法】-最长有效括号(day 38)

题目描述 给定一个只包含 ( 和 ) 的字符串,找出最长的包含有效括号的子串的长度。示例 1:输入: "(()" 输出: 2 解释: 最长有效括号子串为 "()" 示例 2:输入: ")()())" 输出: 4 解释: 最长有效括号子串为 "()()"来源&#…

Day07 Stream流递归Map集合Collections可变参数

Stream 也叫Stream流,是Jdk8开始新增的一套API (java.util.stream.*),可以用于操作集合或者数组的数据。 Stream流大量的结合了Lambda的语法风格来编程,提供了一种更加强大,更加简单的方式操作 public class Demo1 {public stati…

面试算法40:矩阵中的最大矩形

题目 请在一个由0、1组成的矩阵中找出最大的只包含1的矩形并输出它的面积。例如,在图6.6的矩阵中,最大的只包含1的矩阵如阴影部分所示,它的面积是6。 分析 直方图是由排列在同一基线上的相邻柱子组成的图形。由于题目要求矩形中只包含数字…

STM32 音频ADC转wav格式

STM32 音频ADC DAC测试方法_stm32 adc 音频-CSDN博客 STM32--vs1053 WAV录音实现(保存在SD卡)_vs1053 多字节读取-CSDN博客 单片机内部AD实现录音wav文件_adc语音信号采样_天外飞仙CUG的博客-CSDN博客 PCM编码格式_pcm格式-CSDN博客 用ADC编码PCM数据…

SpringCloud微服务 【实用篇】| 认识微服务

目录 一:认识微服务 1. 微服务框架介绍 2. 服务架构演变 3. 微服务技术对比 4. SpringCloud 图书推荐:《巧用ChatGPT快速提高职场晋升力》 一:认识微服务 本课程学习于黑马,会通过分层次学习,分为三部分去讲解微…

数据与视图的完美契合:Vue响应式的交织魅力

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

JavaScript手写题

手动实现map方法(面试:用友、猿辅导、字节) 回调函数接受三个参数。分别为:数组元素,元素索引,原数组本身。map方法执行的时候,会自动跳过未被赋值或者被删除的索引。map方法返回一个新数组&am…

springboo单机多线程高并发防止重复消费的redis方案

springboo单机多线程高并发防止重复消费的redis方案 仅提供方案与测试。 想法:第一次收到userCode时,检查是否在redis中有,如果有,就表明已经消费了,返回抢单失败;否则,就去消费,顺…

adb设备调试常用命令

自从工作越来越忙后,越来越懒得写文章了,趁着1024程序员节,仪式性地写篇文章,分享一下最近调试设备经常用到的adb指令~ 1.查看应用内存占用 1.1 dumpsys meminfo package dumpsys是查看系统服务信息的一个常用指令,可…

30天精通Nodejs--目录与说明

说明 本系列博客主要针对nodejs零基础的小伙伴,涵盖了Node.js从基础到高级的各个方面。 前置条件,有js的基础,了解css和html。 nodejs版本20.8.1。 目录 基础知识 第1天:基础介绍 第2天:模块系统与npm 第3天&#…

从REST到GraphQL:升级你的Apollo体验

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 「推荐专栏」: ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄,vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

Qt之实现支持多选的QCombobox

一.效果 1.点击下拉列表的复选框区域 2.点击下拉列表的非复选框区域 二.实现 QHCustomComboBox.h #ifndef QHCUSTOMCOMBOBOX_H #define QHCUSTOMCOMBOBOX_H#include <QLineEdit> #include <QListWidget> #include <QCheckBox> #include <QComboBox>…

R语言生物群落(生态)数据统计分析与绘图

R 语言作的开源、自由、免费等特点使其广泛应用于生物群落数据统计分析。生物群落数据多样而复杂&#xff0c;涉及众多统计分析方法。以生物群落数据分析中的最常用的统计方法回归和混合效应模型、多元统计分析技术及结构方程等数量分析方法为主线&#xff0c;通过多个来自经典…

计算机算法分析与设计(14)---贪心算法(会场安排问题和最优服务次序问题)

文章目录 一、会场安排问题1.1 问题描述1.2 思路分析1.3 例题分析1.4 代码编写 二、最优服务次序问题2.1 问题描述2.2 思路分析2.3 代码编写 一、会场安排问题 1.1 问题描述 假设在足够多的会场里安排一批活动&#xff0c;并希望使用尽可能少的会场。设计一个有效的贪心算法进…

LuatOS-SOC接口文档(air780E)--libgnss - NMEA数据处理

示例 -- 提醒: 本库输出的坐标,均为 WGS84 坐标系 -- 如需要在国内地图使用, 要转换成对应地图的坐标系, 例如 GCJ02 BD09 -- 相关链接: https://lbsyun.baidu.com/index.php?titlecoordinate -- 相关链接: https://www.openluat.com/GPS-Offset.html-- 方案1, 经lua层进行数…

十八、字符串(3)

本章概要 正则表达式 基础创建正则表达式量词CharSequencePattern 和 Matcherfinde()组&#xff08;Groups&#xff09;start() 和 end()Pattern 标记split()替换操作reset()正则表达式与 Java I/0 正则表达式 很久之前&#xff0c;_正则表达式_就已经整合到标准 Unix 工具…

python第三次作业

拿硬币 # 有一堆硬币&#xff0c;每次只能拿一个或者两个&#xff0c;求最少多少次可以拿完硬币 # [10, 8, 5, 3, 27, 99]# 定义如题的带有5个元素的列表&#xff0c;表示五堆硬币 list [10,8,5,3,27,99] # 定义一个变量用来记录拿的次数 get 0 # 将列表遍历,如果元素是双数…

芯片手册自用

UG585 ZYNQ BOOK&#xff1a;Zynq 7000 SoC 技术参考手册 Zynq 7000 SoC Technical Reference Manual • Zynq 7000 SoC Technical Reference Manual (UG585) • 阅读器 • AMD 自适应计算文档门户 (xilinx.com) UG586 MIG:Zynq-7000 SoC 和 7 系列器件内存接口解决方案 ug5…

python网络爬虫实例

目录 1、访问百度 2、输入单词百度翻译 3、豆瓣电影排行榜 4、豆瓣电影top250 5、下载美女壁纸 1、访问百度 from urllib.request import urlopen url"http://www.baidu.com" respurlopen(url)with open("mybaidu.html",mode"w") as f:f.wr…

ilr normalize isometric log-ratio transformation

visium_heart/st_snRNAseq/05_colocalization/create_niches_ct.R at 5b30c7e497e06688a8448afd8d069d2fa70ebcd2 saezlab/visium_heart (github.com) 更多内容&#xff0c;关注微信&#xff1a;生信小博士 The ILR (Isometric Log-Ratio) transformation is used in the anal…