Question

我的转换属性有问题。有一个position: absolute的框。要把它放在父div的中心，我使用transform: translate(-50%, -50%)因为在实际项目中我有自适应页面。所以，我不能使用px和负边距。

此外，我想应用zoomIn动画，并看到动画行transform: translate(-50%, -50%)无法正常工作。我想，这是因为双重转换属性。

我该如何解决？

这是Codepen https://codepen.io/pndparade/pen/VKGXPj

上的示例

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

Answer 1

你可以在左右两个位置使用calc：

left:calc(50% - 100px);
top: calc(50% - 100px);

当您需要较旧的浏览器支持时，您可以添加：

left:-webkit-calc(100% - 100px);
left:-moz-calc(100% - 100px);
left:calc(50% - 100px);

right:-webkit-calc(100% - 100px);
right:-moz-calc(100% - 100px);
right: calc(50% - 100px);

Answer 2

对于horizontally中心，我使用margin 0技巧和垂直使用比例。

注意：更好地理解我标记为.box green bg

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
}
.box{
  height: 100%;
  width: 200px;
  margin:0 auto;
  position: relative;
  background: green;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top:-webkit-calc(100% - 100px);
  top:-moz-calc(100% - 100px);
  top:calc(50% - 100px);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

<div class="box">
  <div class="box-in"></div>
</div>

Answer 3

我不确定您希望得到最终结果，但一般的解决方案是将变换属性组合在一起，如下所示：

-webkit-transform: scale3d(1, 1, .1) translate(-50%, -50%);
transform: scale3d(1, 1, 1) translate(-50%, -50%);

例如：

要使元素放大并同时缩放：https://codepen.io/anon/pen/rrkAZQ
在放大之前首先使元素缩放：https://codepen.io/anon/pen/EgZpKB

Answer 4

诀窍是将动画设置为变换。

同样棘手的是变换的顺序 ...

＆＃13;

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
    transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform:  translate(-50%, -50%) scale3d(1, 1, .1);
    transform:  translate(-50%, -50%) scale3d(1, 1, 1);
  }
}

＆＃13;

<div class="box">
  <div class="box-in"></div>
</div>

＆＃13;

如果元素使用动画，则Css变换不适用

4 个答案: