CSS3中2D转换形式
CSS 中的 2D 转换允许我们在二维空间中执行一些基本的变换操作，例如移动、旋转、缩放或扭曲等，变换后的元素与绝对定位的元素类似，不会影响周围的元素，但可以和周围的元素重叠，不同的是，转换后的元素在页面中任然会占用为转换之前的空间。
下面我们来介绍2D的转换：
一、移动translate（）
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动,可以改变元素在页面中的位置，类似于定位。
1. 语法：
transform:translate(x,y);
或者分开写也是可以的
transform:translateX(n); transform:translateY(n);
2. 重点：
（1）定义2D转换中的移动，沿看X,Y轴元素移动；
（2）translate最大的优点就是不会影响其他元素的位置；
（3）translate自身的百分比是相对于自身元素translate（50%，50%）;
（4）对行内标签没有效果；
举例说明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
transform: translate(100px, 10px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行结果：
二、旋转rotate（）
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
语法：transfrom:rotate(旋转的度数)
重点：
rotate(度数),单位是deg例如：rotate(45deg);
角度是正为顺时针，是负为逆时针；
默认顺时针的中心点为元素的中心点；
举例说明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 20px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行结果：
三、2D转换中心点transform-origin:
语法：
transform-origin:x y;
重点：
（1）注意后面x,y用空格隔开；
（2）x y默认的中心点是元素的中心点(50% 50%);
（3）还可以给x y设定像素或者方向名词(right left center bottom top);
四、缩放 scale()
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
（1）修改元素的大小，放大或者缩小元素
（2）为负数会颠倒
（3）函数的语法格式如下：
scale(sx, sy)
其中 sx 表示水平方向的缩放比例，sy 表示垂直方向的缩放比例。另外，参数 sy 可以省略，它的默认值等于 sx。
举例说明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
transform: scale(0.7);
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行结果：
五、倾斜 skew()
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
（1）skewX(<angle>);表示只在X轴(水平方向)倾斜。
（2）skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
（3）让元素在不同方向上倾斜。
（4）skew(a)等于skew(a,0)
（5）skew(x,y)
（6）单位角度deg
举例说明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
transform: skew(-15deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行结果：
六、matrix()
matrix() 函数可以看作是 skew()、scale()、rotate() 和 translate() 几个函数的缩写形式，通过 matrix() 函数可以同时定义所有 2D转换操作，函数的语法格式如下：
matrix(a, b, c, d, tx, ty)
matrix() 函数中的 6 个参数分别对应 scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() 几个函数，您可以使用 matrix() 来实现各种 2D转换操作，例如：
translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);：
其中 tx 和 ty 是水平和垂直平移值；
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);
其中，a 是度数的值。您可以交换 sin(a) 和 -sin(a) 值来进行反向旋转；
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);
其中 sx 和 sy 是水平和垂直缩放比例值；
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);
其中 ax 和 ay 是以 deg 为单位的水平和垂直值。
举例说明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
float: left;
}
.one {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
.two {
margin-left: 35px;
transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
}
.three {
margin-left: 40px;
margin-top: 25px;
transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
}
.four {
transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>运行结果：
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
用矩阵表达变换量 matrix(a,b,c,d,x,y)
● a c x
● b d y
● 0 0 1
下面运用一个具体案例来实践一下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 100px;
}
.transformElement{
width:200px;
height:200px;
background-color: red;
transition:all 1s linear;
float: left;
position: relative;
left: 0;
color: #FFF;
/* transform-origin: left top; */
}
.transformElement2{
width:200px;
height:200px;
background-color: blue;
transition:all 1s linear;
float: left;
}
.transformElement:hover{
/* transform: translate(200px,0) rotate(360deg) scale(2); */
/* left: 100px; */
/* transform: scale(2,0.5) */
transform: skew(-45deg,45deg);
}
.clock{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #Faa;
position: relative;
}
.stick{
width: 4px;
height: 200px;
background-color: blue;
position: absolute;
left: 198px;
top: 0;
transition: all 12s linear;
transform-origin: center bottom;
}
.stickshort{
width: 8px;
height: 100px;
background-color: rgb(142, 21, 248);
position: absolute;
left: 196px;
top: 100px;
transition: all 12s linear;
transform-origin: center bottom;
z-index: 2;
}
.clock:hover .stick{
transform: rotate(4320deg);
}
.clock:hover .stickshort{
transform: rotate(360deg);
}
</style>
</head>
<body>
<!-- <div></div>
<div></div> -->
<div>
<div></div>
<div></div>
</div>
</body>
</html>运行结果：
本文固定URL：https://www.dotcpp.com/course/1166