转换效果的使用

transform属性可以实现网页元素的平移、旋转、变形、缩放。包含2D空间和3D空间的转换效果。

选择器 {
  transform: 属性值;
}

未来平移和放大是特别重要的，经常会使用，旋转也会使用，变形不太常使用。

transform所有的属性都不会影响到布局，而且性能会比margin定位这些位置改变要更好一些。

平移

如何实现对应的平移效果，例如margin，定位都可以实现对应的平移效果，但是，性能上来讲，转换的平移操作性能更好，转换操作不会影响其他元素布局（位置改变，但还在原有位置占据空间）

选择器 {
  transform: translate()
}

translate可以有多个属性

• translate()
• translateX()
• translateY()

可以一个属性写多个值，也可以对应的单个属性写单个值。

translate(x的值, y的值)
translateX(x的值)
translateY(y的值)

值为正数，在原有位置想右 下移动，值为负值，在原有位置向左 上移动

如果这个值是百分比，那么是根据自身宽度或高度的百分比进行计算的。

元素垂直水平居中

使用translate进行平移，可以使用百分比实现自身宽高一半的平移效果，所以说，使用translate代替对应的margin，可以有效的解决对应元素位置宽高的问题。

选择器 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

哪怕使用了定位属性，如果要移动，也可以通过transform，性能更好。

旋转

rotate，旋转效果，2d效果中，我们只考虑rotate属性即可，即基于中心点的旋转效果

选择器 {
  transform: rotate(角度)
}

角度

css中大部分都是角度 deg

0deg
180deg

在我们的元素上使用transform都有一个坐标系，默认横平竖直，如果我们旋转了，那么对应的坐标轴也会跟着旋转

缩放

元素缩放效果，缩放不会影响到其他元素布局，整个元素中所有的元素都会缩放，和单纯的设置宽高不同。

选择器 {
  transform: scale(倍数);
}

我们可以使用scale对元素的宽高进行缩放，等于1时不进行任何缩放，大于1 放大，小于1 缩小

一个值时，直接对宽高都进行缩放

选择器 {
  transform: scale(2);
}

两个值写法时，前面的值表示x轴缩放，后面的值表示y轴缩放

选择器 {
  transform: scale(x, y);
}

变形

使用skew属性，可以让我们的元素进行变形操作

选择器 {
  transform: skew(角度);
}

所谓的变形，其实在改变坐标轴的角度，当只写一个值时，对应的角度指x轴的旋转角度。基于新的坐标轴重新绘制图形。得到一个变形的图形。

改变原点位置

不管是我们的平移旋转还是缩放，都有一个原点，默认在元素的正中心。我们如果想要实现一些不一样的效果，可以使用transform-origin属性，设置我们元素的原点。

选择器 {
  transform-origin: x y;
}

这些值可以设置固定值 可以设置百分比 可以设置关键字

x可以用的关键字 left center right

y可以用的关键字 top center bottom

0%表示left top 100%表示right bottom 50%表示center