translateY介绍

概述

translateY是CSS3中的一种Transform属性，可以将元素在垂直方向上移动。它可接受正负整数值，单位为像素（px）、百分比（%）或以视窗为基准的单位（vw、vh等等）。

语法

transform: translateY(value);

应用

1. 垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.item {
  transform: translateY(-50%);
}

上述代码实现了将元素在垂直方向上以负50%的高度进行移动，从而实现了垂直居中的效果。

2. 滑入/滑出动效

.item {
  transform: translateY(0);
  transition: transform .3s ease-out;
}

.item:hover {
  transform: translateY(-10px);
}

上述代码实现了鼠标悬浮时元素从下向上滑出10px的动效。

不足

使用translateY属性对元素进行移动其实是利用了CSS3的硬件加速特性，因此具有一定的性能优势。不过需要注意的是，当元素的布局变化（如修改了宽高或位置改变）时，就需要重新计算元素的位置，这样可能会带来一定的性能消耗。因此，需要进行一定的优化处理，避免滥用translateY属性。