翻转三角形3d css或javascript

我想要一个像这样的直角三角形

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

用3D动画翻转成为这样的直角

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

我对角线转换的运气很少，但却只有一个三角形。我可以按照这里的指南http://davidwalsh.name/css-flip垂直和水平地翻转它但是我无法对角翻转盒子。

任何帮助或方向是非常感谢！

按要求JSFiddle： http ： //jsfiddle.net/y36cdwx2/

要了解有关css3 rotate3d的更多信息，您可以访问此链接以了解有关它的更多信息。要完成您想要对角旋转框的操作，可以使用： transform: rotate3d(90, -90, 0, 180deg);

以下是完整的源代码： http ： //jsfiddle.net/yp6j5qem/15

希望这可以帮助！