css3 transform(2D)的使用
transform的使用
transform 属性允许你修改CSS视觉格式模型的坐标空间
transform 属性 , 只对 block 级元素生效！
transfrom的基本属性有：
①translate：平移
②rotate:旋转
③skew:倾斜
④transform-origin：基点的变换
⑤scale:缩放
⑥matrix:矩阵。旋转；平移；缩放；
(1) translate的用法
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx, ty)； 如果ty没有指定，它的值默认为0。
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);
代码如下所示：
body:hover #test{
transform: translateX(300px);
}
(2) rotate的用法
transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
代码如下所示：
body:hover #test{
transform: rotate(45deg);
}
(3) skew的用法
transform:skewX(45deg);
X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0)
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变
正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角
代码如下：
body:hover #box{
transform: skewY(-30deg);
}
(4) transform-origin
transform-origin CSS属性让你更改一个元素变形的基点。
transform-origin的写法如下：
transform-origin: 100px 100px;
transform-origin: top left;
…
如下案例：
设置基点前的如下图所示
设置基点后的位置：
代码如下：
#test{
width: 300px;
height: 100px;
background: pink;
transition: 2s;
transform-origin: top left;
}
(5) 缩放scale
transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)
正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);
案例如下： 将正方形缩小到一半
(6) Matrix矩阵
在 2D变换 中，矩阵变换函数 matrix() 接受 6个值，语法形式如下：
transform: matrix(a, b, c, d, e, f);
这相当于，对元素应用一个如下的变换矩阵：
点(Xi,Yi,1)进行变换后的新坐标
即根据变换矩阵进行变换之后点 (xi,yi) 的坐标是(axi+cyi+e,bxi+dyi+f)
(7) 矩阵-旋转
对某一元素应用旋转变换 rotate(θ)，相当于对其应用如下变换矩阵：
即等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。
(8) 矩阵-平移
对某一元素应用旋转变换 translate(X, Y)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)。
(9) 矩阵-缩放
对某一元素应用缩放变换 scale(scaleX, scaleY)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)
(10) 矩阵-倾斜
对某一元素应用倾斜变换 skew(α, β)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(1, tanβ, tanα,1, 0, 0)。
案列：使用变换组合，顺序不同导致呈现的结果不同
使用组合之前如图所示：
使用变换组合之后呈现如下图所示。
1号距离左边的距离：宽度为125px
2号距离左边的距离:75px
造成如上图的问题原因：
使用变换组合时,最终要转换成矩阵的形式，浏览器的计算方向是从右往左进行继续的
按照 1号 列举一个点 的换算如下
已基点为坐标，图中点的坐标为（50，50）
2号的换算结果为
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow: hidden;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
overflow: hidden;
}
#test1{
width: 100px;
height: 100px;
line-height: 100px;
background: pink;
text-align: center;
transition:2s;
}
#test2{
margin-top: 50px;
width: 100px;
height: 100px;
line-height: 100px;
background: pink;
text-align: center;
transition:2s;
}
/*变换组合时,计算方向是从右往左进行继续的*/
/*2号换算
1 0 100 50 150
0 1 0 50 50
0 0 1 1 1
.5 0 0 150 75
0 .5 0 50 25
0 0 1 1 1
*/
/*
从右往左
.5 0 0 50 25
0 .5 0 50 25
0 0 1 1 1
1 0 100 25 125
0 1 0 25 25
0 0 1 1 1
*/
/*(50,50)---->(125,25)*/
body:hover #test1{
transform: translateX(100px) scale(.5);
}
body:hover #test2{
transform: scale(.5) translateX(100px);
}
</style>
</head>
<body>
1号;transform: translateX(100px) scale(.5);
<br>
2号;transform: scale(.5) translateX(100px);
<div id="test1">
1号
</div>
<div id="test2">
2号
</div>
</body>
</html>
上一篇： 机器学习之数据与特征工程
下一篇： Java实现图片缩放（等比例）
推荐阅读
-
css3 transform(2D)的使用
-
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
-
详解CSS3中Media Queries的相关使用
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
使用CSS3的animation steps属性实现跳帧动画
-
css3中新增的样式使用方法 - jerrylsxu
-
将横杠-转码成%2d，这个是使用什么函数转换的？
-
HTML5实践-使用css创建三角形和使用CSS3创建3d四面体的代码详解
-
如何使用css3实现一个类在线直播的队列动画的示例代码
-
浅析CSS3 中的 transition，transform，translate之间区别和作用