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

【问题标题】：How to animate a rotated DOM element with CSS如何使用 CSS 为旋转的 DOM 元素设置动画
【发布时间】：2016-03-19 15:14:03
【问题描述】：

完整代码开启：https://jsfiddle.net/k1t7gy8L/

我有以下 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>

使用以下 CSS：

.mask-2.cd-intro-content .content-wrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 2em 0;
  overflow: hidden;
  transform:rotate(45deg);
  background-color: #0F0;
}
.mask-2.cd-intro-content .content-wrapper .inner{
    transform:rotate(-45deg);
    background-color: #F00;
}
.mask-2.cd-intro-content .content-wrapper > div {
  position: relative;
  z-index: 1;
}

.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
  animation-duration: 3.5s;
  animation-delay: 1.1s;
  animation-fill-mode: backwards;
}

.mask-2.cd-intro-content .content-wrapper {
  animation-name: cd-mask-wrapper;
}

.mask-2.cd-intro-content .content-wrapper > div {
  animation-name: cd-mask-content;
}
@keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

一切都像魅力一样：除了transform:rotate(45deg); 上的旋转仅在动画之后生效。这是为什么？如何在动画之前旋转它？。

我的想法是用对角线而不是垂直线来显示内容。

【问题讨论】：

尝试在.mask-2.cd-intro-content .content-wrapper .inner中删除你的css transform:rotate(-45deg);

标签： css css-animations keyframe

【解决方案1】：

您必须在转换时声明所有内容。但您也必须注意 translate 将被旋转，因此借助几何学的超能力您可以这样做：

@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);
}
}

是的。翻译然后旋转包装器很重要。并旋转然后翻译内容。测试一下 =)

【讨论】：