Warum funktioniert meine Transformation nicht?

.rotate { 
 
    display: block; 
 
    width: 64px; 
 
    height: 64px; 
 
    border: 2px black dashed; 
 
    animation: rotate 40s linear infinite; 
 
    border-radius: 50%; 
 
    transform: scale(1.8); 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>

, wenn Sie einen Blick auf die Geige nehmen, die "Transformation: Skala (1,8);" hat nicht funktioniert. Gibt es noch andere Alternativen, um die Grenze größer zu machen?

Quelle

2017-12-08 FreakS

Warum gehst du nicht einfach ... erhöhen die border-width? – Maharkus

Was versuchen Sie eigentlich? Wenn Sie einen dickeren Rand wünschen, erhöhen Sie ihn einfach von 2px. –

Ich möchte, dass es mit der rotierenden Animation dieses große https://jsfiddle.net/frn6mqrg/2/ aussieht. – FreakS

Dort gehen Sie. Die Transformation funktioniert nicht, wenn Sie versuchen, in der anfänglichen Rotate-Klasse zu skalieren, weil sie sich aufgrund der rotierenden Animation allmählich ändert. Sie müssen zuerst die Breite oder Höhe und dann die Rahmengröße anpassen und dann die Animation darauf anwenden.

.rotate { 
 
\t display: block; 
 
\t width: 115px; 
 
\t height: 115px; 
 
\t border: 4px black dashed; 
 
\t animation: rotate 40s linear infinite; 
 
\t border-radius: 50%; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg);} 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>

Quelle

2017-12-08 10:56:12

ich sehe. eine andere frage, wie vergrößere ich die lücke zwischen der grenze? – FreakS

Was meinst du mit der Lücke? Meinst du den weißen Zwischenraum zwischen jedem Grenzblock? –

Das wäre eine andere Frage. Ich empfehle Ihnen, eine separate Frage dafür zu stellen. @FreakS Ich denke du brauchst dafür aber ein border-image. – Maharkus

Nicht, dass wirklich hart. Erhöhen Sie die Höhe und Breite manuell und erhöhen Sie die Rahmenbreite.

.rotate { 
 
    display: block; 
 
    width: 115px; 
 
    height: 115px; 
 
    border: 4px black dashed; 
 
    animation: rotate 40s linear infinite; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>

Quelle

2017-12-08 10:57:06 Maharkus

Lol, habe ich die gleiche Antwort schon gepostet und habe sie bewertet? lol –

Ich habe dich nicht downvote, frag mich nicht haha – Maharkus

Warum funktioniert meine Transformation nicht?

Antwort

Verwandte Themen