Matrix 3d transform to get trapezoid?
I am trying to simulate the opposite effect as two doors open back at the same time. I tried different matrix generators to get the trapezoid I needed, but I had no luck. I know I need to animate the rotation from 0 to 180 degrees and keep my transformation origin, but this trapezoid is killing me.
+3
source to share
1 answer
How about using it perspective
?
demonstration
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);
}
+5
source to share