Doubt regarding using transform and animation with js?

Question

In the attached program, i want to flip an div element about y-axis from right to left and in the same position and orientation (which is obtained after one flip) another flip has to take place downside to upside but before executing 2 nd animation the orientation was getting changed to original one, can anyone tell what's the problem and give your solution too. Thanks for help
https://code.sololearn.com/WaTUCkyfKK59/?ref=app

Answer 1

Then add another keyframe in example above with dame value.
Like :
0%{...}
40%{ <some_property>}
60%{ <some_property>}
100%{...}

Same properties in 40% and 60%.
Can increase and decrease this wait by increasing gap between them.

Answer 2

Use " transform-origin : 50%50%; " in style tag.

Answer 3

But i want to flip about a side of the division block

Answer 4

Try this in single transition:
0%{
transform:rotateY(0deg);
}
50%{
transform:rotateY(180deg);
}
100%{
transform: rotateZ(180deg);

Answer 5

But i also want that the element to stay in the position which is after 1 st rotation.
And sorry i forgot to mention this in the problem