前端实现hover效果，进入长方形中将长方形分成六等分

实现此效果可以通过CSS3的transform属性来实现。你可以将长方形设置为一个div，然后使用伪元素来实现分割线，在鼠标hover时通过transform属性旋转伪元素使之呈现分割线的效果。

具体实现步骤如下：

1. 设置长方形的样式：

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
  position:relative; /* 定位为父元素 */
  transition: transform .3s ease;
}

.rectangle:hover {
  transform: rotate(-60deg); /* 鼠标hover时进行旋转动画 */
}

2. 使用伪元素添加分割线：

.rectangle::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: black;
  top: 0;
  left: calc(33.33333% - 1px); /* 计算出分割线在第一个等分中的位置 */
  transform-origin: right bottom; /* 设置旋转基点为右下角 */
  transform: rotate(-60deg); /* 给伪元素进行旋转动画，与父元素同步变形 */
}

.rectangle::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: black;
  top: 0;
  left: calc(66.66667% - 1px); /* 计算出分割线在第三个等分中的位置 */
  transform-origin: right bottom; /* 设置旋转基点为右下角 */
  transform: rotate(-60deg); /* 给伪元素进行旋转动画，与父元素同步变形 */
}

通过上述CSS代码，你可以实现鼠标hover时将长方形分成6个等分的效果。