CSS3转换不翻译

Question

有谁能告诉我为什么这个变换translate3d在+ X和-X中的upperTitle和lowerTitle元素不起作用？这可能是疏忽，但我不明白。感谢您的时间。歪斜有效，但我希望上标题从左边进入，而下标题从右边进入，使用transform：translate3d（-x％，0,0）和translate3d（+ x％，0， 0），分别。

＆＃13;

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的第二个transform覆盖了你的第一个。

要拥有多个transform，请执行以下操作：

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

<强> Working Fiddle