css3转换绝对坐标问题

CSS3转换是前端开发中经常用到的功能，它能够实现对元素的旋转、缩放、移动等操作。但是在实际应用中，我们常常遇到绝对定位元素在进行转换后，位置出现偏移的问题。下面我们就来看看如何解决这个问题。

/* CSS代码片段 */
.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

css3转换绝对坐标问题

以上是一个绝对定位元素的CSS样式，通过将left和top值都设为50%来实现元素在父容器中居中对齐。但是，当我们给这个元素添加转换动画的时候：

/* CSS代码片段 */
.absolute:hover {
  transform: translate(-50%,-50%) rotate(45deg);
}

在鼠标悬停时给元素添加了旋转动画，但是发现元素的位置出现了偏移，不再居中对齐了。这是因为CSS3转换默认以元素自身左上角为原点进行变换，而不是以元素的中心点为原点。因此，我们需要使用代码来手动计算元素的中心点位置，并将其设置为变换的原点。代码如下：

/* CSS代码片段 */
.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) translate(50%,50%) rotate(0deg) translate(-50%,-50%);
}

.absolute:hover {
  transform: translate(-50%,50%) rotate(45deg) translate(-50%,-50%);
}

以上代码中，我们在变换前先使用translate(50%,50%)将元素的中心点移动到容器左上角的位置，然后再执行原来的变换，最后再使用translate(-50%,-50%)将元素移回原来的位置。这样就能够实现绝对定位元素进行转换后保持居中对齐了。

css3转换绝对坐标问题

相关文章