CSS3 2D转换 transform

3/17/2021 CSS3Transfrom

# 文章目录

# 一、2D 转换 transform

转换( transform) 是 CS3 中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。

转换( transform)你可以简单理解为变形

  • 移动:translate
  • 旋转:rotate
  • 缩放:scale

# 1.1 2D 是什么?

2D 转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系。
在这里插入图片描述

# 二、translate 移动

2D 移动是 2D 转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
在这里插入图片描述

# 2.1 语法

  • transform: translate(x,y)
  • transform: translateX(n) 只移动 X 轴
  • transform: translateY(n) 只移动 Y 轴

# 2.2 特点

  • 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
  • translate 最大的优点: 不会影响到其他元素的位置
  • translate 中的百分比单位是相对于自身元素的 translate(50%,50%)
  • 对行内标签没有效果

# 2.3 实现水平垂直居中

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
1
2
3
4
5

注意这里的原理:transform 是相对自身元素的一半来移动的,而定位的 50%,刚好需要子元素的一半来修正偏差,所以正好达到水平垂直居中的效果

.father {
  width: 500px;
  height: 500px;
  background-color: pink;
  position: relative;
}
.son {
  width: 200px;
  height: 200px;
  background-color: teal;
  position: absolute;
  left: 50%;
  top: 50%;
  /*transform: translate(-100px,-100px);*/
  /*由于translate 的百分比正好是依据自身元素来定位的,所以-50%正好可以十分灵活的实现水平垂直居中*/
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 三、rotate 旋转

2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

# 3.1 语法

transform:rotate(度数)

重点:

  • rotate 里面度数,单位是 deg 如 rotate(45deg)
  • 角度为正时,顺时针,负时,为逆时针
  • 默认旋转的中心点元素的中心点

# 3.2 利用旋转做一个 下拉三角

div{
   width: 249px;
   height: 50px;
   border: 1px solid #000;
   position: relative;
 }
 div::after{
   content: '';
   display: inline-block;
   position: absolute;
   top: 15px;
   right: 10px;
   width: 15px;
   height: 15px;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   transform: rotate(45deg);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

# 3.3 设置旋转中心点 transform-origin

利用该属性,我们可以给元素设置旋转的中心点。

语法:

transform-origin:x y;

注意:

  • 后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点(50%50%) (center center)
  • 还可以给 x y 设置像素或者方位名词( top bottom left right center)

示例:

围绕左下角旋转:left bottom

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
div {
  width: 100px;
  height: 100px;
  background-color: pink;
  transition: all 1s;
  transform-origin: left bottom;
}
div:hover {
  transform: rotate(360deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 三、scale 缩放

缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

# 3.1 语法

transform:scale(x,y)

注意点:

  • 注意其中的 x 和 y 用逗号分隔
  • transform: scale(1,1):宽和高都放大一倍,相对于没有放大
  • transform: scale(2,2):宽和高都放大了 2 倍
  • transform scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2.2)
  • transform: scale(0.5,0.5):缩小
  • sacle 缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

# 3.2 案例 放大两倍

div {
  width: 200px;
  height: 200px;
  background-color: pink;
  transition: all 0.3s;
}
div:hover {
  transform: scale(2);
}
1
2
3
4
5
6
7
8
9

# 3.3 设置缩放中心点 也是 transform-origin

div {
  width: 200px;
  height: 200px;
  background-color: pink;
  transform-origin: right center;
  transition: all 0.3s;
}
div:hover {
  transform: scale(2);
}
1
2
3
4
5
6
7
8
9
10

效果:
在这里插入图片描述

# 四、综合写法

  1. 同时使用多个转换,其格式为: transform: translate rotate scale… 等
  2. 顺序会影转换的效果先旋转会改变坐标轴方向
  3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

示例:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
div {
  width: 200px;
  height: 200px;
  background-color: teal;
  transition: 0.3s;
}
div:hover {
  transform: translate(150px, 150px) rotate(180deg);
  /* 以下写法效果异常:会先旋转再位移 */
  /* transform:rotate(180deg) translate(150px,150px) ; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果:
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar