CSS matrix() 详解

2D转换

IE10、Firefox、Opera 支持 transform 属性

Chrome、Safari 需要前缀 -webkit- 。

IE9 需要前缀 -ms- 。

translate():接收两个参数:水平移动的距离、垂直移动的距离

transform: translate(50px, 100px);

可以分别使用 translateX() 或者 translateY() 进行单独指定。

rotate():接收一个参数:顺时针(正数)或逆时针(负数)旋转的角度

transform: rotate(45deg);

scale():接收两个参数:width 的倍数、height 的倍数

transform: scale(0.5, 0.5);

使用 scaleX() 或者 scaleY() 单独指定。

skew():接收两个参数:围绕 X 轴翻转的角度、围绕 Y 轴翻转的角度

transform: skew(30deg, 30deg);

使用 skewX() 或者 skewY() 单独指定。

如果需要同时应用多于一种转换效果,需要使用空格,而不是逗号

transform: scale(2, 2) rotate(45deg);

transform-origin:其默认值为 transform 元素的中心点,即 50% 50% ;可以改变这个属性的值,从而改变变换的中心点。

比如将其 transform-origin 设置为 0 0 ,使用 scale() 变换,能明显看出区别。

中心点的设置是相对于元素的左上角,可以使用像素法、百分比法、关键字法自定义变换的中心点。

matrix():接收 6 个参数:a、b、c、d、e、f

其计算规则为:

其中,x 和 y 表示变换前矩阵偏移元素中心点的坐标;x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。

中心点的坐标固定为(0, 0),这个值与 transform-origin 的值无关;也就是说,即使 transform-origin 的值从默认的 50% 50% 被指定为 (假设)30px 30px ,其意为坐标 (0, 0) 从 50% 50% 的位置移动到 30px 30px 的位置; 30px 30px 这个点是新的中心点,其坐标为 (0, 0) 。

假设 matrix(1,0,0,1,30,30) ;

那么 x‘ 和 y‘ 分别等于 x + 30 和 y +30 ;

也就是说,经过矩阵转换之后,(0, 0) 变成 (30, 30) ,(1, 1) 变成 (31, 31) ,以此类推。。。直到变换元素所有的坐标都经过变化之后,在新的位置上组成了一个新的图形。

其结果与 translate(30px, 30px) 完全相同。

其动态演示参考这里

总结

位移:

matrix(1, 0, 0, 1, tx, ty)  ===  translate(tx + "px", ty + "px")

x‘ = x + tx

y‘ = y + ty

缩放:

matrix(sx, 0, 0, sy, 0, 0)  ===  scale(sx, sy)

x‘ = sx * x

y‘ = sy * y

旋转:

matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)  ===  rotate(θ + "deg")

顺序为 CS - SC ;

x‘ = x * cosθ - y * sinθ

y‘ = x * sinθ + y * cosθ

需要传入具体的 cos 或者 sin 值。

斜切:

matrix(1, tan(θy), tan(θx), 1, 0, 0)  === skew(θx + "deg", θy + "deg")

x‘ = x * tan(θx)

y‘ = y * tan(θy)

参考:

理解 CSS3 transform 中的 matrix (矩阵)

时间: 2024-10-01 05:25:40

CSS matrix() 详解的相关文章

CSS选择器详解

CSS选择器详解 选择器是CSS的核心,从最初的元素.class/id选择器,演进到伪元素.伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单. 1.元素选择器 这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;} 2.关系选择器 E F:后代选择器,该选择器定位元素E的后代中所有元素F: ul li {margin-bottom:0.5em;} E > F:子选择器,

彻底理解浮动float CSS浮动详解 清除浮动的方法

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流 定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要

CSS优先级详解(权重详解)

CSS选择器权重值的计算 对于Css权重,现在网上很多版本都是这样计算的:内联样式1000点,ID100点,Class.伪类(pseudo-classes)或属性选择器10点,标签元素和伪元素(pseudo-elements)1点:虽然大多数时候是正确的但因为真正的原理并非如此,所以某些情况下会出错. css权重有ABCD四个值,A代表行间样式,B代表选择器中ID的数量,C代表选择器中类, 伪类, 属性选择器的数量,D代表标签元素和伪元素的数量. 具体理解请看例子: * {} A,B,C,D(0

带你走进CSS定位详解

学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bottom right left z-index position 基本语法: position:static | absolute | fixed | relative 语法介绍: static:默认值,无特殊定位. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,ri

安卓自定义View进阶-Matrix详解

这应该是目前最详细的一篇讲解Matrix的中文文章了,在上一篇文章Matrix原理中,我们对Matrix做了一个简单的了解,偏向理论,在本文中则会详细的讲解Matrix的具体用法,以及与Matrix相关的一些实用技巧. Matrix方法表 按照惯例,先放方法表做概览. 方法类别 相关API 摘要 基本方法 equals hashCode toString toShortString 比较. 获取哈希值. 转换为字符串 数值操作 set reset setValues getValues 设置.

CSS长度单位详解

序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇文章试图整理在前端开发中用到的CSS单位和其应用场景. px——像素 px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10.所以

CSS 计数器详解

在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过程耗时较长而且维护修改起来较困难.用css counter配合伪类的content完美的解决了这个问题,这里详细介绍下css counter属性 计数器属性介绍 计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter()

css line-height详解

转自http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head>

CSS系列(6) CSS通配符详解

通配符使用星号*表示,意思是“所有的”. 平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称: 也就是使用 * 加后缀名,就可以在电脑中搜索文件. 在CSS中,同样使用 * 代表所有的标签或元素,它叫做通配符选择器. 比如:* { color : red; } 这里就把所有元素的字体设置为红色. *会匹配所有的元素,因此针对所有元素的设置可以使用*来完成,用的最多的例子如下: *{margin:0px; padding:0px