2017-04-17 5 views
-6

Ich möchte den Block entlang seiner Länge nach links verschieben. Wie kann ich das tun? enter image description hereWie man den Block entlang seiner Breite bewegt (nur css)

+4

Ihre Frage ist völlig unklar. Bitte erläutern. – Santi

+0

Vielleicht möchten Sie ein bisschen mehr Code und eine Erklärung hinzufügen, was Sie zu tun versuchen. Was Sie haben, reicht nicht aus, um Sie bei einem bestimmten Problem zu unterstützen. – CodeLikeBeaker

+0

Welcher Block? Richten Sie ein schnelles Spiel ein, Alter. Hilf uns, dir zu helfen. –

Antwort

0

einfaches Beispiel reine css:

.mytext { 
 
    border: 8px black solid; 
 
    text-align: center; 
 
    font-size: 45px; 
 
    left: 300px; 
 
    width: inherit; 
 
    height: 60px; 
 
    transition: 2s; 
 
    -webkit-transition: 2s; 
 
    -moz-transition: 2s; 
 
    position: absolute; 
 
} 
 

 
.mytext:hover { 
 
    left: 0; 
 
} 
 

 

 
.mytext2 { 
 
\t margin-top: 100px; 
 
    border: 8px black solid; 
 
    text-align: center; 
 
    font-size: 45px; 
 
    width: 300px; 
 
    height: 60px; 
 
    transition: 2s; 
 
    -webkit-transition: 2s; 
 
    -moz-transition: 2s; 
 
    position: absolute; 
 
} 
 

 

 
@keyframes slideToLeft { 
 
    0% { 
 
    transform: translateX(100%); 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
} 
 

 
.mytext2 { 
 
    /* This section calls the slideInFromLeft animation we defined above */ 
 
    animation: 2s ease-out 0s 1 slideToLeft; 
 
}
<div class="mytext">text</div> 
 
<div class="mytext2">text2</div>

+0

Sie richtig verstanden, was ich will, aber ich brauche nicht js – MaximPro

+0

@MaximPro versuchen, eine aktualisierte? –

+0

@MaximPro, Wenn eine Antwort hilft Ihnen [vote it up] (http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), Wenn die Antwort das ist, was Sie suchen Markiere es als [Correct answe] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) für die zukünftigen Leser. Vielen Dank! –

Verwandte Themen