Flip a triangle 3d css or javascript

Question

I am trying to have a right angle triangle such as this

. . . . . . .
.         .
.       .
.     .
.   .
. .
.

flip with a 3d animation to become a right angle such as this

            .
          . .
        .   .
      .     .
    .       .
  .         .
. . . . . . .

I have had very little luck with diagonal transformation, yet alone one of a triangle. I was able to flip it vertically and horizontally following the guides here http://davidwalsh.name/css-flip however I cannot flip the box diagonally.

Any help or direction is most appreciated!

as requested JSFiddle: http://jsfiddle.net/y36cdwx2/

please add a fiddle of what you've achieved so far. – Anubhav Mar 08 '15 at 02:19 — Anubhav, Mar 08 '15 at 02:19
Do a jsFiddle with your code please? – Nikk Mar 08 '15 at 02:19 — Nikk, Mar 08 '15 at 02:19

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

To understand more about css3 rotate3d, you can visit this link to learn more about it. To accomplish what you want to do to rotate your box diagonally, you can use: transform: rotate3d(90, -90, 0, 180deg);

Here is the full source code how to do it: http://jsfiddle.net/yp6j5qem/15

Hope this helps!

edited May 23 '17 at 11:43

Community

1
1

answered Mar 08 '15 at 06:53

Khoa Pham

285
3
10

I tried to modify your code to make it a triangle and then have the triangle flip, but it breaks the entire functionality when I I convert the box to triangle, here is the source code, do you know if its possible to achieve this with triangle divs? http://jsfiddle.net/yp6j5qem/11/ – Bagzli Mar 08 '15 at 15:10
1

Here is the modified code that flips triangle: http://jsfiddle.net/yp6j5qem/15/ Hope this helps! – Khoa Pham Mar 08 '15 at 16:33
can't thank you enough! If you don't mind, please update your answer with the latest fiddle as that one completely answers my question; so that future venturers can find the answer easier! – Bagzli Mar 08 '15 at 17:08

Flip a triangle 3d css or javascript

1 Answers1

Linked