CODEWITHSUNDEEP
cssanimationsvgtransformationcss-transforms
MorganFR
MorganFR

Reputation: 341

CSS transform-origin always (0,0) on SVG

I would like to make each polygon/group appear with an animation. I want it to be a rotation on the Y axis, with the origin of the rotation being the Y axis of the leftmost vertex (imagine a playing card being revealed after the left edge is against the table, from perpendicular to flat).

However, as per this Fiddle, the origin of the transformation is always the Y axis but with always x = 0 as the origin of the rotation even though I use the leftmost vertex as the transform-origin.

BONUS: After the initial rotation, I would like to wait 1 second, then have another rotation to make it disappear (0 to -90deg) with the Y axis of the rightmost vertex as the origin.

.three {
    animation: spin 1s linear;
}

#three {
    transform-origin: 87px 153px;
    /*transform-origin: top left;*/
}

@keyframes spin {
    0% { 
        transform: rotateY(-90deg); 
    }  
    100% { 
        transform: rotateY(0deg); 
    } 
}
<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
    <g class='three' fill="gray" stroke="black" stroke-width="1">
        <polygon id="three"  points="222,0 200,107 87,153" />
    </g>
</svg>

Upvotes: 0

Views: 269

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

A 3D transform applied to an outermost <svg> element should generally work.

However applying them to the elements inside an <svg> is still a bit iffy.

Luckily, in this case, you can reproduice what you want without using a 3D rotation. We use a scale instead of a rotation. And we use an easing function that simulates what would happen in a rotation.

#three {
    transform-origin: 87px 153px;
    animation: spin 1s linear;
    animation-timing-function: cubic-bezier(0.000, 0.550, 0.450, 1.000);
}

@keyframes spin {
    0% { 
        transform: scale(0, 1); 
    }  
    100% { 
        transform: scale(1, 1); 
    } 
}
<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
    <g class='three' fill="gray" stroke="black" stroke-width="1">
        <polygon id="three"  points="222,0 200,107 87,153" />
    </g>
</svg>

Upvotes: 1

Related Questions