web-dev-qa-db-fra.com

CSS3 Traduire à travers un arc

Est-il possible avec le CSS3 actuel de traduire un objet (en particulier un DIV) le long d'un arc ou d'une courbe? Voici une image pour aider à illustrer. enter image description here

csscss-transitionstranslatecss-transforms
38
Arron Hunt

Vous pouvez utiliser des éléments imbriqués et faire tourner le wrapper et l'élément interne dans des directions opposées afin que la rotation de l'élément interne compense la rotation du wrapper.

Si vous n'avez pas besoin de garder l'élément imbriqué horizontal, vous pouvez omettre la rotation interne.

Voici un Dabblet . Extrait de pile:

/* Arc movement */

.wrapper {
        width: 500px;
        margin: 300px 0 0;
        transition: all 1s;
        transform-Origin: 50% 50%;
}
.inner {
        display: inline-block;
        padding: 1em;
        transition: transform 1s;
        background: Lime;
}
html:hover .wrapper {
        transform: rotate(180deg);
}
html:hover .inner {
        transform: rotate(-180deg);
}
<div class="wrapper">
    <div class="inner">Hover me</div>
</div>

En outre, Lea Verou a écrit un article sur ce problème d'une manière qui n'utilise qu'un seul élément: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

30
kizu

Oui, cette animation peut être créée à l'aide de la propriété CSS3 transform-Origin pour définir le point de rotation à l'extrême droite afin qu'il se déplace comme ça.

Vérifiez-le: http://jsfiddle.net/Q9nGn/4/ (passez votre souris)

#c {
    border: 1px solid black;
    height: 400px;
}

#c:hover #m {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transform: rotate(180deg);
    -moz-transition: all 1s ease-in-out;
    -o-transform: rotate(180deg);
    -o-transition: all 1s ease-in-out;
    -ms-transform: rotate(180deg);
    -ms-transition: all 1s ease-in-out;
    transform: rotate(180deg);
    transition: all 1s ease-in-out;
}

#m {
    width: 60px;
    height: 60px;
    position: absolute;
    background: green;
    border-radius: 30px;
    top: 270px;
    left: 20px;
    -webkit-transform-Origin:300px 30px;
    -moz-transform-Origin:300px 30px;
    -o-transform-Origin:300px 30px;
    -ms-transform-Origin:300px 30px;
    transform-Origin:300px 30px;
}
<div id="c">
    <div id="m"></div>
</div>
11
Ivan Castellanos

Une alternative au déplacement de l'origine de la transformation consiste à utiliser un élément imbriqué double dans lequel une transformation x est appliquée au conteneur externe et une transformation y avec une courbe d'accélération appropriée est appliquée au conteneur interne.

4
Michael Mullany