matrix()方法与translate()、scale()、rotate()、skew()方法的关系
2D变换方法translate()、scale()、rotate()、skew()与matrix()的关系举例介绍。
一、介绍
2D变换方法:
- translate():根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
- rotate():在一个给定度数顺时针旋转元素。负值是允许的,这样是元素逆时针旋转。(绕着中心点旋转)
- scale():元素按比例缩放,比例取决于宽度(X轴)和高度(Y轴)的参数。(缩放功能与中心点的位置有关)
- skew():X轴和Y轴倾斜一定角度。
matrix():2D变换方法合并成一个。有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
CSS3 transform 的 matrix() 方法如下:
transform: matrix(a,b,c,d,e,f);
二、关系与举例
1、matrix()与translate()偏移功能
matrix(a,b,c,d,e,f)实现偏移,只由e、f这两个参数决定。
参数e决定水平偏移量,f决定垂直偏移量。
eg:
transform: matrix(1, 0, 0, 1, , )
就等同于
transform: translate(30px, 30px)
即:向右偏移30px的同时向下偏移30px
2、matrix()与scale()缩放功能
matrix(a,b,c,d,e,f)实现偏移,只由a、d这两个参数决定。
参数a决定水平缩放量,d决定垂直缩放量。即:X轴(宽度)缩放a倍,Y轴(高度)缩放d倍。
eg:
transform: matrix(, 0, 0, , 0, 0)就等同于
transform: scale(2, 3)
即:元素宽度变为原来的2倍,高度变为原来的3倍
3、matrix()与rotate()旋转功能
matrix(a,b,c,d,e,f)实现旋转(假设角度为θ),对应方法如下:
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
eg:
transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0)就等同于transform:rotate(30deg)
即:以中心点为旋转点,顺时针旋转30度
4、matrix()与skew()倾斜功能
matrix(a,b,c,d,e,f)实现倾斜,与b、c两个参数有关。
b决定Y轴倾斜程度,c决定X轴倾斜程度,对应方法如下:
matrix(1,tan(θy),tan(θx),1,0,0)
eg:
matrix(1, 2.237161, 2.237161,1,0,0)就等同于transform:skew(20deg,20deg)
即:元素在X轴上倾斜20度和Y轴上倾斜20度。
matrix()方法与translate()、scale()、rotate()、skew()方法的关系的更多相关文章
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...
- 转:自定义控件三部曲之动画篇——alpha、scale、translate、rotate、set的xml属性及用法
第一篇: 一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resour ...
- Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...
- [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- android.view.animation(1) - alpha、scale、translate、rotate、set的xml属性和用法(转)
一.ScaleAnimation ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, floa ...
- 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法
前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随 ...
随机推荐
- C++将一个数组内容赋给另一个数组
有两种方式: 一.进行数组遍历,依次赋值 ] = { , , , , }; ] ={ }; ;i<sizeof(arr1)/sizeof(int);i++) arr2[i] = arr1[i] ...
- Java字符串进阶
Java字符串进阶 前言 最常用的对字符串操作的类有三个,分别是String,StringBuilder,StringBuffer,下面将会详细的说说这三个类...... String String类 ...
- python 标准库 -- re
re 正则表达式 语法 import re m = re.search('[0-9]','abc4def67') # 匹配字符及匹配范围 print m.group(0) # 返回匹配结果 re.se ...
- 谈谈java中遍历Map的几种方法
java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点 先初始化一个map public ...
- Java内存分配及垃圾回收机制(未完待待续)
Java内存区域 1.内存区域 jvm运行时数据区域 程序计数器 Java虚拟机栈 本地方法栈 方法区 Java堆 大图 2.概念解释 程序计数器 线程私有的一块很小的内存空间,它是当前线程所执行 ...
- go语言获取变量的数据类型
package main import "fmt" import "reflect"; var y string = "sdasd" fun ...
- mongodb取出最大值与最小值
$res=self::aggregate([ ['$match'=>[ 'msg_id'=>1007, 'D'=>16, ]], ['$group'=>[ '_id'=> ...
- jq和js插件的各个文件夹里放置的内容
1. demo文件夹,存放各种实例. 2. dist文件夹,全称是distribution.在某些框架中,因为开发和发布的内容或者代码形式是不一样的(比如利用Grunt压缩等等),这时候就需要一个存放 ...
- [leetcode-617-Merge Two Binary Trees]
Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...
- Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...