如何使用CSS设置旋转DOM元素的动画

完整代码位于：

我有以下HTML：

<section class="cd-intro">
  <div class="cd-intro-content mask-2">
    <div class="content-wrapper">
      <div class="inner">
        <h1>Animated Intro Section</h1>
        <p>A collection of text effects for the intro section of your website</p>
        <div class="action-wrapper">
          <a href="#0" class="cd-btn main-action">Get started</a>
          <a href="#0" class="cd-btn">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

一切都像一个魔咒：除了

transform:rotate（45度）上的旋转仅在动画之后生效。为什么呢？如何在动画之前旋转它

我的想法是用一条对角线而不是一条垂直线来显示内容。
您必须声明变换中的所有内容。但你也要注意平移会被旋转，所以借助几何的超能力，你可以做到这一点：

@keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0)  rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
@keyframes cd-mask-content {
0% {
-webkit-transform:  rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform:  rotate(-45deg) translateX(-100%);
-o-transform:  rotate(-45deg) translateX(-100%);
transform:  rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}

对。重要的是平移然后旋转包装器。然后旋转并翻译内容。测试它=）
您必须声明转换中的所有内容。但你也要注意平移会被旋转，所以借助几何的超能力，你可以做到这一点：

@keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0)  rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
@keyframes cd-mask-content {
0% {
-webkit-transform:  rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform:  rotate(-45deg) translateX(-100%);
-o-transform:  rotate(-45deg) translateX(-100%);
transform:  rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}

对。重要的是平移然后旋转包装器。然后旋转并翻译内容。测试它=）
尝试删除css
transform:rotate（-45度）.mask-2.cd-intro-content.content wrapper.inner中的code>尝试移除css
变换：旋转（-45度）位于
.mask-2.cd-intro-content.content wrapper.internal