Question

我正在研究CSS转换，我不能让这一部分工作。

＆＃13;

#photo-container img {
  transition: transform 2s, transform-origin 2s;
}

#container-1 img:hover {
  transform: rotate(45deg);
  transform-origin: 0 0;
}

#container-2 img:hover {
  transform: rotate(1.5turn);
  transform-origin: 50%, 50%;
}
#container-3 img:hover {
  transform: scale(1.5);
  transform-origin: 0 0;
}

＆＃13;

<div class="photo-container" id="container-1">
  <div class="photo">
    <img src="http://placehold.it/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

＆＃13;

三个类HTML元素与下面发布的相同。我的问题是，我将变换原点更改为0 0，并且它有一个变换设置为旋转，当旋转发生并完成时，而不是像它到达那里那样返回到其原始位置，它重新定位自己，然后转到旋转功能中指定的那个点并从那里开始。

我在这里错过了什么或者这是正常的功能吗？

编辑。我塞满了东西。抱歉打扰

Answer 1

尝试将transform-origin添加到没有hover的图片中。并将#photo-container更改为.photo-container我无法看到其他问题。

＆＃13;

.photo-container {
  display: inline-block;
}

.photo-container img {
  transition: transform 2s, transform-origin 2s;
  transform-origin: 0 0;
}

#container-1 img:hover {
  transform: rotate(45deg);
}

#container-2 img:hover {
  transform: rotate(1.5turn);
}

#container-3 img:hover {
  transform: scale(1.5);
}

＆＃13;

<div class="photo-container" id="container-1">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

<div class="photo-container" id="container-2">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

<div class="photo-container" id="container-3">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

＆＃13;

使用rotate

1 个答案: