CSS3变形-2Dtranslate相关属性及案例、scale相关属性及案例、skew相关属性及案例、rotate相关属

「这是我参与2022首次更文挑战的15天，活动详情查看：2022首次更文挑战」

transform属性的变形方法包括：

translate() 平移
scale() 缩放
skew() 倾斜
rotate() 旋转

一、translate

语法：

transform: translateX(x); 沿x轴方向平移等价于 transform: translate(x, 0);
transform: translateY(y); 沿y轴方向平移等价于 transform: translate(0, y);
transform: translate(x, y); 沿x轴和y轴同时平移

单位：px、em、百分比

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24-CSS3变形-translate</title>
<style>
  div {
    width: 200px;
    height: 100px;
  }
  #origin {
    border: 1px dashed green;
  }
  #current {
    background-color: rgba(30, 170, 250);
    opacity: 0.6;
    transform: translateX(20px);
  }

  #origin2 {
    margin-top: 50px;
    border: 1px dashed sienna;
  }

  #current2 {
    background-color: rgba(30, 170, 250);
    opacity: 0.6;
    transform: translateY(-30px);
  }

  #origin3 {
    margin-top: 50px;
    border: 1px dashed navy;
  }

  #current3 {
    background-color: rgba(30, 170, 250);
    opacity: 0.6;
    transform: translate(10px, 20px);
  }
</style>
</head>
<body>
  <div id="origin">
  <div id="current"></div>
  </div>
  <div id="origin2">
  <div id="current2"></div>
  </div>

  <div id="origin3">
  <div id="current3"></div>
</div>
</body>
</html>

二、scale

语法：

transform: scaleX(x) 沿x轴方向缩放等价于transform: scale(x, 0);
transform: scaleY(y) 沿y轴方向缩放等价于transform: scale(0, y);
transform: scale(x, y) 沿x轴y轴同时缩放

x或y 0~1时为缩小，大于1时为放大

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25-CSS3变形-scale</title>
<style>
  div {
    width: 200px;
    height: 100px;
  }

  #origin {
    border: 1px dashed salmon;
  }

  #current {
    background-color: rgb(30, 170, 250);
    opacity: 0.6;
    transform: scaleX(0.6);
  }
</style>

</head>
<body>
  <div id="origin">
  <div id="current"></div>
</div>
</body>
</html>

三、skew

语法：

transform: skewX(x);
transform: skewY(y);
transform: skew(x, y);

单位（deg） ：

关于x: 如果是正数，表示沿x轴方向逆时针倾斜；如果是负数表示沿x轴方向顺时针倾斜
关于y：如果是正数，表示沿y轴方向顺时针倾斜；如果是负数表示沿y轴方向逆时针倾斜

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26-CSS3变形-skew</title>
<style>
  div {
    width: 200px;
    height: 100px;
  }

  #origin {
    border: 1px dashed salmon;
  }

  #current {
    background-color: rgb(30, 170, 250);
    opacity: 0.6;
    transform: skewX(30deg);
  }

  #origin2 {
    margin-top: 60px;
    border: 1px dashed salmon;
  }

  #current2 {
    background-color: rgb(30, 170, 250);
    opacity: 0.6;
    transform: skewY(30deg);
  }
</style>

</head>
<body>
  <div id="origin">
  <div id="current"></div>
  </div>
  <div id="origin2">
  <div id="current2"></div>
</div>
</body>
</html>

四、rotate

语法：

transform: rotate(angle);

单位（deg）：

如果是正数表示顺时针旋转，如果是负数表示逆时针旋转。

CSS3的各种变形：平移、缩放、倾斜都是以元素的中心原点进行变形的。

改变中心原点的语法：transform-origin: 取值;

取值有两种：长度值（可以是px、em 和百分比）、关键字

关键字	百分比	说明
top left	0 0	左上
top center	50% 0	靠上居中
top right	100% 0	右上
left center	0 50%	靠左居中
center center	50% 50%	正中
right center	100% 50%	靠右居中
bottom left	0 100%	左下
bottom center	50% 100%	靠下居中
bottom right	100% 100%	右下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>27-CSS3变形-rotate</title>
<style>
  div {
    width: 200px;
    height: 100px;
  }

  #origin {
    border: 1px dashed salmon;
  }

  #current {
    background-color: rgb(30, 170, 250);
    opacity: 0.6;
    transform: rotate(30deg);
  }

  #origin2 {
    margin-top: 100px;
    border: 1px dashed salmon;
  }

  #current2 {
    background-color: rgb(30, 170, 250);
    transform-origin: right center; /*改变中心原点*/
    opacity: 0.6;
    transform: rotate(30deg);
  }
</style>

</head>
<body>
  <div id="origin">
  <div id="current"></div>
  </div>

  <div id="origin2">
  <div id="current2"></div>
</div>
</body>
</html>