小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
2D位移
translate()函数用于将元素向指定的方向进行移动，类似于position中的relative。 使用translate()函数移动元素时，不会影响在X轴或Y轴上其他元素。
translate(tx)或者translate(tx, ty)
- tx:表示X轴移动的偏移量。当其值为正值时，元素向X轴右方向移动;反之其值为负值时，元素向X轴左方向移动。
- ty:表示Y轴移动的偏移量。当其值为正值时，元素向Y轴下方向移动;反之其值为负值时，元素向Y轴上方向移动。
上述函数也可分为：
- translateX(tx)函数:用于仅在X轴方向移动。
- translateY(ty)函数:用于仅在Y轴方向移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D位移</title>
<style>
.container div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.container div:nth-child(1) {
background-color: aqua;
}
.container div:nth-child(2) {
background-color: blueviolet;
/*
translate(tx,ty)函数
* 作用 — 将指定元素进行平移
* 参数
* tx - 表示水平方向的平移
* ty - 表示垂直方向的平移
* 效果 - 类似于position的relative（相对定位）
*/
transform: translate(100px,100px);
}
.container div:nth-child(3) {
background-color: rgb(104, 95, 112);
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box')
var x = 0;
var t =setInterval(function(){
if (x >= 800) {
clearInterval(t);
}else {
box.style.transform = 'translate(' + x + 'px)';
x++;
}
},10);
</script>
</body>
</html>
2D缩放
scale()函数用于将元素根据中心原点进行缩放，默认值为1。如果该值的范围在0.01至099之间的话,表示缩小;如果该值是大于1的值，则表示放大。
scale(sx)或者scale(sx, sy)
- SX:表示X轴的缩放向量。
- Sy:表示Y轴的缩放向量。
上述可以分为：
- scaleX(sx)函数:用于仅在X轴方向的缩放。
- scaleY(sy)函数:用于仅在Y轴方向的缩放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D缩放</title>
<style>
.container div {
width: 200px;
height: 200px;
display:inline-block ;
}
.container div:nth-child(1) {
background-color: aqua;
}
.container div:nth-child(2) {
background-color: blueviolet;
/* CSS中的scale()函数围绕元素的中心点进行缩放 */
transform:scale(0.5,0.5) ;
}
.container div:nth-child(3) {
background-color: rgb(104, 95, 112);
transform: scale(1.5,1.5);
}
.container div:nth-child(4) {
position: relative;
left: 200px;
background-color: rgb(28, 28, 29);
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div id="box"></div>
</div>
<script>
/* 使用js实现动态缩放效果 */
var box = document.getElementById('box')
var x = 0 , y = 0;
var t = setInterval(function(){
if (x >=1 ||y >= 1 ) {
clearInterval(t);
} else {
box.style.transform = 'scale(' + x + ',' + y +')';
x+= 0.01,y+= 0.01;
}
},10);
</script>
</body>
</html>
2D旋转
rotate()函数用于通过指定的角度将元素根据原点进行旋转。该函数主要用于2D空间进行旋转。如果该角度值为正值的话，表示顺时针旋转;如果该角度值为负值的话，则表示逆时针旋转。
rotate(angle)
angle:表示旋转的角度值，单位为deg。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D旋转</title>
<style>
.container div {
width: 200px;
height: 200px;
display:inline-block ;
}
.container div:nth-child(1) {
background-color: aqua;
}
.container div:nth-child(2) {
background-color: green;
/*
rotate(angle)函数
* 作用 - 实现指定元素旋转
* 效果 - 围绕元素的中心点进行旋转
* 参数
* angle - 表示旋转的角度
* 注意
* 如果角度为0度 - 不发生任何旋转
* 如果角度为正数 - 表示顺时针旋转
* 如果角度为负数 - 表示逆时针旋转
*/
transform: rotate(45deg);
}
.container div:nth-child(3) {
background-color: aqua;
/*
注意：rotate()函数与translate()和scale()函数不同
* rotateX()和rotateY()函数不能单独使用
* rotateX(),rotateY()和rotateZ()函数同时使用
* 与rotate3d()函数等价
*/
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</body>
</html>
2D倾斜
skew()函数用于将元素以其中心位置围绕着X轴和Y轴按照一定的角度 倾斜。与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew)函数不会旋转，而只会改变元素的形状。
skew(ax)或者skew(ax, ay)
- ax:表示X轴倾斜的角度。
- ay:表示Y轴倾斜的角度。
上述函数可以分为：
- skewX(ax)函数:用于仅在X轴方向倾斜。
- skewY(ay)函数:用于仅在Y轴方向倾斜。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D倾斜</title>
<style>
.container div {
width: 200px;
height: 200px;
display:inline-block ;
}
.container div:nth-child(1) {
background-color: aqua;
}
/* 设置倾斜角度 */
.container div:nth-child(2) {
background-color: green;
transform: skew(0,45deg);
}
.container div:nth-child(3) {
background-color: rgb(62, 62, 126);
transform: skew(45deg,0);
}
.container div:nth-child(4) {
background-color: lightcoral;
transform: skew(30deg,45deg);
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
