CSS3 转换不翻译

Question

谁能告诉我为什么 +X 和 -X 中的 upperTitle 和 lowerTitle 元素上的 translate3d 转换不起作用？这可能是一个疏忽，但我没有看到。感谢您的时间。偏斜有效，但我希望使用 transform: translate3d(-x%, 0, 0) 和 translate3d(+x%, 0, 0），分别。

#parent {
  width: 1000px;
  height: 600px;
  border: 1px solid;
}

.titleLayer {
  position: absolute;
  z-index: 14;
}

#titleContainer {
  position: relative;
  height: 100%;
}

#upperTitle {
  position: absolute;
  width: 50%;
  height: 15%;
  top: 35%;
  left: 25%;
  text-align: center;
}

#lowerTitle {
  position: absolute;
  width: 50%;
  height: 15%;
  bottom: 35%;
  right: 25%;
  text-align: center;
}

/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInLeft {
  0% {
  opacity: 0;

  -webkit-transform: translate3d(-500%, -50%, 0);
  -webkit-transform: skewX(-30deg);
  }

  60% {
  opacity: 1;

  -webkit-transform: translate3d(-100%, -50%, 0);
  -webkit-transform: skewX(20deg);
  }

  80% {
  -webkit-transform: translate3d(-50%, -50%, 0);
  -webkit-transform: skewX(-5deg);
  }

  100% {
  -webkit-transform: none;
  }
}

/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInLeft {
  0% {
  opacity: 0;

  -webkit-transform: translate3d(-500%, -50%, 0);
  -webkit-transform: skewX(-30deg);
  }

  60% {
  opacity: 1;

  -webkit-transform: translate3d(-100%, -50%, 0);
  -webkit-transform: skewX(20deg);
  }

  80% {
  -webkit-transform: translate3d(-50%, -50%, 0);
  -webkit-transform: skewX(-5deg);
  }

  100% {
  -webkit-transform: none;
  }
}

/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInRight {
  0% {
  opacity: 0;

  transform: translate3d(950%, -50%, 0);
  transform: skewX(30deg);
  }

  60% {
  opacity: 1;

  transform: translate3d(200%, -50%, 0);
  transform: skewX(-20deg);
  }

  80% {
  transform: translate3d(-50%, -50%, 0);
  transform: skewX(5deg);
  }

  100% {
  transform: none;
  }
}

/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInRight {
  0% {
  opacity: 0;

  transform: translate3d(950%, -50%, 0);
  transform: skewX(30deg);
  }

  60% {
  opacity: 1;

  transform: translate3d(200%, -50%, 0);
  transform: skewX(-20deg);
  }

  80% {
  transform: translate3d(-50%, -50%, 0);
  transform: skewX(5deg);
  }

  100% {
  transform: none;
  }
}

.speedInLeft {
  /* Chrome, Safari, Opera */
  -webkit-animation: speedInLeft 1.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;

  /* Standard syntax */
  animation: speedInLeft 1.5s ease-in-out;
  animation-fill-mode: forwards;
}

.speedInRight{
  /* Chrome, Safari, Opera */
  -webkit-animation: speedInRight 1.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;

  /* Standard syntax */
  animation: speedInRight 1.5s ease-in-out;
  animation-fill-mode: forwards;
}

@font-face {
  font-family: 'open_sans_condlight';
  src: url('fonts/opensanscondensedlight/opensans-condlight-webfont.eot');
  src: url('fonts/opensanscondensedlight/opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/opensanscondensedlight/opensans-condlight-webfont.woff2') format('woff2'),
     url('fonts/opensanscondensedlight/opensans-condlight-webfont.woff') format('woff'),
     url('fonts/opensanscondensedlight/opensans-condlight-webfont.ttf') format('truetype'),
     url('fonts/opensanscondensedlight/opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
  font-weight: normal;
  font-style: normal;
}

.textCenter {
  text-align: center;
}

.openSansCondensedLight {
  font-family: 'open_sans_condlight', Fallback, sans-serif;
}

.fontBold {
  font-weight: bold;
}

.fontBlack {
  color: #000000;
}

.size5 {
  font-size: 500%;
}

<div id="parent">
  <div id="titleContainer" class="titleLayer">
    <div id="upperTitle" class="speedInLeft">
      <span class="openSansCondensedLight fontBlack size5">Quick Loan</span>
    </div>
    <div id="lowerTitle" class="speedInRight">
      <span class="openSansCondensedLight fontBlack size5">Connect</span>
    </div>
  </div>
</div>

Answer 1

您的第二个 transforms 将覆盖您的第一个。

要拥有多个transforms，请这样做：

transform: translate3d(-50%, -50%, 0) skewX(5deg);

Working Fiddle