CODEWITHSUNDEEP
cssanimationjquery-animatetransform
Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Matrix 3d transform for obtaining trapezoid?

I try to simulate a turn to back effect, as two doors open to back simultaneously. I tried different matrix generators to obtain that trapezoid needed but i didn't have any luck. I know i have to animate an rotateY from 0 to 180 degrees and to keep my transform origin but that trapezoid kills me.

Upvotes: 3

Views: 2590

Answers (1)

Ana
Ana

Reputation: 37179

How about using perspective?

demo

HTML:

<div class='doors'>
    <div class='door'></div><div class='door'></div>
</div>

Relevant CSS:

.doors { perspective: 35em; }
.door {
    display: inline-block;
    width: 50%; height: 100%;
    transition: 1s;
}
.doors:hover .door:first-child {
    transform-origin: 0 50% 0;
    transform: rotateY(60deg);
}
.doors:hover .door:last-child {
    transform-origin: 100% 50% 0;
    transform: rotateY(-60deg);
}

Upvotes: 5

Related Questions