Question

所以我遇到的基本问题是我想要一个旋转的漩涡，它位于各自div的中间。当我尝试进行变换时：在动画之外进行平移，它不会被激活，如果我尝试在动画中调用它，则图像会围绕左上角旋转。我似乎无法弄清楚如何将图像垂直和水平居中，并让它同时旋转。

以下是我正在使用的代码：

div img
{
    position: absolute;
    display:block;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    margin: auto;
    width:auto;
    height: auto;
    max-height: 70%;
    max-width: 70%;




    -webkit-animation: rotate 3s linear infinite 0s;
    -moz-animation: rotateup 3s linear infinite 0s;
    -o-animation: rotate 3s linear infinite 0s;
    -ms-animation: rotate 3s linear infinite 0s;
    animation: rotate 3s linear infinite 0s
}

@-webkit-keyframes rotate {
 from {
     -webkit-transform: rotate(0deg);
}
to {
      -webkit-transform: rotate(360deg);                                 
}

这是一个表明我的问题的小提琴。 http://jsfiddle.net/4j7T4/

感谢您的帮助！

Answer 1

以下是更新的fiddle。

由于div的宽度为30px，高度为30px，因此放置-15px的左边距和边距顶部（或宽度/高度的负半边）

{
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
}

另一个只有正方形http://jsfiddle.net/tb5Bg/

的例子

Answer 2

我会旋转div而不是图像。另外，我会以不同的方式对待它。试试这个：你使用的是sass还是autoprefixr？如果没有，你应该检查出来。我使用.image-w的块元素修饰符，这对于响应式图像和内容很有用，并且在绝对定位的中心内容上使用了一点@mxin。只要您指定要居中的高度和宽度，自动边距就可以完成。这是a codepen.

HTML

<div class="image-w spinner"><img src="http://placehold.it/400x400" alt="spinner" /></div>

SCSS

.image-w {
  //
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@mixin absolute-center {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
}

.spinner {
  width: 10em;
  height: 10em;
  @include absolute-center;
  border-radius: 50%;
  overflow: hidden;
  animation: rotate 3s linear infinite 0s
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
  animation: rotate 3s linear infinite 0s
}

旋转时CSS3居中图像

2 个答案:

HTML

SCSS