Wie ein gedrehtes DOM-Element mit CSS

Question

Voll Code animieren ist auf: https://jsfiddle.net/k1t7gy8L/

Ich habe folgende 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> 

mit folgendem 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); 
    } 
} 

Alles funktioniert wie ein Charme: Außer, dass die Rotation auf transform:rotate(45deg); erst nach der Animation wirksam wird. Warum das? Wie kann ich es vor der Animation drehen ?.

Meine Idee ist, den Inhalt mit einer diagonalen Linie statt einer vertikalen Linie zu zeigen.

Answer 1

Sie müssen alles bei der Transformation deklarieren. Aber auch das muss man wird gedreht beachten Sie übersetzen, so mit der Supermacht der Geometrie können Sie dies tun:

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

Ja. Es ist wichtig, zu übersetzen und dann den Wrapper zu drehen. Und drehen und übersetzen Sie dann den Inhalt. Testen Sie es =)